Example: Mermaid Diagrams

Mermaid is a JavaScript-based diagramming and charting tool that renders Markdown-inspired text definitions into diagrams.

Setup

Add the Mermaid JavaScript library to your site by creating or editing a _head.html file in your docs folder:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
</script>

Usage

To embed a Mermaid diagram, wrap your Mermaid syntax in a <div> element with the mermaid CSS class:

<div class="mermaid">
graph LR
    A[Input docs] --> B[fsdocs build]
    B --> C[HTML output]
    B --> D[API reference]
</div>

This renders as:

graph LR A[Input docs] --> B[fsdocs build] B --> C[HTML output] B --> D[API reference]

More Examples

Sequence diagram:

sequenceDiagram participant User participant fsdocs participant Browser User->>fsdocs: dotnet fsdocs watch fsdocs-->>Browser: Serve docs User->>fsdocs: Edit .md or .fsx fsdocs-->>Browser: Reload page

Class diagram:

classDiagram class ApiDocComment { +Summary: string +Remarks: string option +Parameters: ApiDocSection list } class ApiDocMember { +Name: string +Comment: ApiDocComment } ApiDocMember --> ApiDocComment

Tips

You can also use <div class="mermaid text-center"> to centre the diagram on the page.
To customise the Mermaid theme, pass options to mermaid.initialize() before the import call.
See the Mermaid documentation for the full list of supported diagram types.