Skip to main content

Mermaid

An independently installable component. Its content and surrounding layout remain consumer-owned.

Rendering diagram…

open FSharp.ViewEngine
open Acme.Components
open type Html

let mermaid = Mermaid.create "flowchart LR\n  Input[Input] --> Validate[Validate]\n  Validate --> Result[Result]" |> Mermaid.render

On this page

dotnet fve add mermaid --config src/Acme.Components/fve.json

open FSharp.ViewEngine
open Acme.Components
open type Html

let mermaid = Mermaid.create "flowchart LR\n  Input[Input] --> Validate[Validate]\n  Validate --> Result[Result]" |> Mermaid.render

Include Mermaid.assets once in your document head with your Mermaid script URL. Sequence constructors belong to this component.

Sequence constructors

Rendering diagram…

open FSharp.ViewEngine
open Acme.Components
open type Html

let sequence =
    let user = SequenceDiagram.participant "user" "User"
    let server = SequenceDiagram.participant "server" "Server"
    SequenceDiagram.sequence [user; server] [SequenceDiagram.call user server "Validate form"; SequenceDiagram.reply server user "Result"]
    |> SequenceDiagram.render |> Mermaid.create |> Mermaid.render

type MermaidConfig

module SequenceDiagram =
    val participant : id:string -> label:string -> Participant
    val call : sender:Participant -> receiver:Participant -> text:string -> Step
    val reply : sender:Participant -> receiver:Participant -> text:string -> Step
    val optional : label:string -> steps:Step list -> Step
    val branch : label:string -> steps:Step list -> Branch
    val alternatives : branches:Branch list -> Step
    val loop : label:string -> steps:Step list -> Step
    val sequence : participants:Participant list -> steps:Step list -> Diagram
    val render : _arg1:Diagram -> string

module Mermaid =
    val assets : scriptPath:string -> HtmlElement
    val create : source:string -> MermaidConfig
    val withC4 : diagram:MermaidConfig -> MermaidConfig
    val render : diagram:MermaidConfig -> HtmlElement

module MermaidView =
    val diagram : source:string -> HtmlElement
    val c4Diagram : source:string -> HtmlElement