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
https://docs.example.test/diagrams/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
https://docs.example.test/diagrams/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
https://docs.example.test/diagrams/sequence
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 ] ]