Skip to main content

Diagrams

Trusted Mermaid, C4, and validated sequence diagrams for architecture and workflow communication.

On this page

Mermaid

Render a trusted Mermaid source string in the standard responsive diagram surface.

Mermaid
    let flowchart = """flowchart LR
Developer[Developer] --> View[Typed view]
View --> HTML[Encoded HTML]"""
    let mermaidPage =
        docsArticle "diagram" "Rendering flow" "Typed view rendering." [
            docsSection "flow" "Flow" [ docsDiagram flowchart ] ]

C4

Use Mermaid C4 syntax for a proportionate system context, container, component, dynamic, or deployment view.

C4
    let c4Source = """C4Context
title Documentation context
Person(dev, "Developer", "Authors documentation")
System(docs, "Docs site", "Publishes documentation")
Rel(dev, docs, "Uses")"""
    let c4Page =
        docsArticle "c4" "Documentation context" "System context." [
            docsSection "context" "Context" [ docsC4Diagram c4Source ] ]

Sequence diagram

Construct participants and calls with the validated sequence DSL before rendering Mermaid.

Sequence diagram
let developer = SequenceDiagram.participant "Developer" "Developer"
let engine = SequenceDiagram.participant "Engine" "View engine"
let sequenceDiagram =
    SequenceDiagram.sequence [ developer; engine ] [
        SequenceDiagram.call developer engine "Render view"
        SequenceDiagram.reply engine developer "HTML" ]
let sequencePage =
    docsArticle "sequence" "Render a view" "Rendering sequence." [
        docsSection "sequence" "Sequence" [ docsSequence sequenceDiagram ] ]