Mermaid diagrams in .NET

ChartForgeX.Mermaid parses Mermaid source and renders it through the native ChartForgeX engine, with no browser, no Node.js and no mermaid-cli.

Families rendered: 30
Recognised only: 3
Browsers needed: 0

See every family Edit this diagram

Mermaidsequence.mmd

---
title: Dashboard sign-in
---
sequenceDiagram
  autonumber
  actor User
  participant App
  participant IdP as Identity provider
  participant API
  User->>App: Open dashboard
  App->>IdP: Authorization request
  IdP-->>App: ID token + access token
  App->>API: GET /reports (Bearer token)
  alt token valid
    API-->>App: 200 report data
  else token expired
    API-->>App: 401 Unauthorized
  end
  Note over App,API: Tokens refresh silently before expiry
  App-->>User: Render charts

sequence.svg12.5 KB, rendered by ChartForgeX

Family atlas

Every diagram below is drawn by ChartForgeX from the source shown with it. Syntax support does not mean the same layout or pixels as Mermaid's browser renderer. Each diagram is drawn by ChartForgeX with your theme, and diagnostics tell you when source is kept without an exact visual interpretation.

Flows and structure 10

Flowchart

Steps, decisions and branches in a process.

Source 10 lines

Mermaidflowchart.mmd

---
title: Incident response
---
flowchart TD
  alert([Alert raised]) --> triage{Known issue?}
  triage -->|yes| runbook[Run the runbook]
  triage -->|no| owner[Page the service owner]
  runbook --> verify[Verify recovery]
  owner --> fix[Ship a fix]
  fix --> verify

Edit in playground

Sequence

Messages between participants, in the order they happen.

Source 20 lines

Mermaidsequence.mmd

---
title: Dashboard sign-in
---
sequenceDiagram
  autonumber
  actor User
  participant App
  participant IdP as Identity provider
  participant API
  User->>App: Open dashboard
  App->>IdP: Authorization request
  IdP-->>App: ID token + access token
  App->>API: GET /reports (Bearer token)
  alt token valid
    API-->>App: 200 report data
  else token expired
    API-->>App: 401 Unauthorized
  end
  Note over App,API: Tokens refresh silently before expiry
  App-->>User: Render charts

Edit in playground

Class

Types, their members and how they relate.

Source 18 lines

Mermaidclass.mmd

---
title: Chart model
---
classDiagram
  class Chart {
    +string Title
    +WithSize(width, height)
    +ToSvg() string
  }
  class ChartSeries {
    +string Name
    +ChartPoint[] Points
  }
  class VisualTheme {
    +VisualTypography Typography
  }
  Chart "1" *-- "many" ChartSeries : contains
  Chart --> VisualTheme : uses

Edit in playground

State

States an item moves through and what triggers each move.

Source 10 lines

Mermaidstate.mmd

---
title: Document review
---
stateDiagram-v2
  [*] --> Draft
  Draft --> Review : submit
  Review --> Draft : request changes
  Review --> Approved : approve
  Approved --> Published : release
  Published --> [*]

Edit in playground

Entity relationship

Entities, their attributes and the cardinality between them.

Source 17 lines

Mermaider.mmd

---
title: Orders schema
---
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  PRODUCT ||--o{ LINE_ITEM : "ordered in"
  CUSTOMER {
    string id PK
    string name
    string email
  }
  ORDER {
    string id PK
    string customerId FK
    date placed
  }

Edit in playground

Requirement

Requirements and the elements that satisfy or verify them.

Source 28 lines

Mermaidrequirement.mmd

---
title: Sign-in requirements
---
requirementDiagram
direction LR
functionalRequirement mfa_req {
  id: "SEC-1"
  text: Every account signs in with a strong method.
  risk: High
  verifymethod: Test
}
performanceRequirement report_req {
  id: "OPS-4"
  text: The weekly report renders in under a second.
  risk: Low
  verifymethod: Analysis
}
element auth_service {
  type: service
  docref: "Identity provider"
}
element report_job {
  type: job
  docref: "ChartForgeX report"
}
auth_service - satisfies -> mfa_req
report_job - verifies -> mfa_req
report_job - satisfies -> report_req

Edit in playground

Architecture

Services, groups and connections on a system map.

Source 16 lines

Mermaidarchitecture.mmd

---
title: Report platform
---
architecture-beta
group edge(cloud)[Edge]
group core(cloud)[Platform]
group data(database)[Data] in core
service web(internet)[Web] in edge
service api(server)[API] in core
service renderer(server)[Renderer] in core
service sql(database)[SQL] in data
service blob(disk)[Cache] in data
web:R --> L:api
api:R --> L:renderer
renderer:B --> T:blob
api:B --> T:sql

Edit in playground

C4 diagram rendered by ChartForgeX from its Mermaid source.

C4 diagram rendered by ChartForgeX from its Mermaid source, dark theme.

C4

People and software systems in a C4 context view.

Source 7 lines

Mermaidc4.mmd

C4Context
title System Context
Person(customer, "Banking Customer", "A customer of the bank")
System(system, "Internet Banking System", "Allows customers to view balances")
System_Ext(mail, "E-mail System", "Sends notifications")
Rel(customer, system, "Uses", "HTTPS")
Rel(system, mail, "Sends e-mails", "SMTP")

Edit in playground

Block

Blocks placed on a column grid, joined by links.

Source 12 lines

Mermaidblock.mmd

---
title: Render pipeline
---
block-beta
columns 3
collect["Collect"] model["Typed model"] render["Render"]
space:2 svg["SVG"]
space:2 png["PNG"]
collect --> model
model --> render
render --> svg
render --> png

Edit in playground

Packet

Bit ranges of a protocol header, row by row.

Source 8 lines

Mermaidpacket.mmd

---
title: TCP header
---
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
+32: "Acknowledgment Number"

Edit in playground

Planning and process 8

Gantt

Tasks, dependencies and milestones on a calendar.

Source 11 lines

Mermaidgantt.mmd

gantt
  title Release train
  dateFormat YYYY-MM-DD
  section Engine
  Layout pass      :done,    l1, 2026-09-01, 12d
  Label placement  :active,  l2, after l1, 10d
  section Surfaces
  PNG parity       :         s1, 2026-09-10, 14d
  Email preview    :         s2, after s1, 7d
  section Release
  Ship 2.0         :milestone, m1, after l2 s2, 0d

Edit in playground

Timeline

Events grouped into periods along one axis.

Source 5 lines

Mermaidtimeline.mmd

timeline
  title Rendering history
  2024 : Fluent chart API : SVG and PNG output
  2025 : Topology diagrams : Markdown fences
  2026 : Mermaid families : Native WebAssembly playground

Edit in playground

Journey

Tasks scored by how each actor experiences them.

Source 8 lines

Mermaidjourney.mmd

journey
  title Report delivery
  section Build
    Collect data: 5: Collector
    Render charts: 4: ChartForgeX
  section Deliver
    Send email: 3: Mailer
    Read on phone: 5: Reader

Edit in playground

Kanban

Work items in board columns, with optional metadata.

Source 11 lines

Mermaidkanban.mmd

---
title: Playground launch
---
kanban
  todo[To do]
    docs[Write playground docs]
    share[Share links]
  doing[In progress]
    engine[WebAssembly engine]@{ priority: "High" }
  done[Done]
    site[chartforgex.com]

Edit in playground

Git graph

Commits, branches, merges and tags.

Source 12 lines

Mermaidgitgraph.mmd

---
title: Release 2.0 branch
---
gitGraph
  commit id: "init"
  branch feature
  checkout feature
  commit id: "renderer"
  commit id: "tests"
  checkout main
  commit id: "docs"
  merge feature id: "merge" tag: "v2.0"

Edit in playground

Swimlane

A process split into lanes by who owns each step.

Source 15 lines

Mermaidswimlane.mmd

---
title: Pull request flow
---
swimlane-beta LR
subgraph Author
 A[Write source] --> B[Open pull request]
end
subgraph Build
 C{Checks pass?} --> D[Render report]
end
subgraph Reader
 E[Read in email]
end
B --> C
D --> E

Edit in playground

Use case

Actors and the use cases inside a system boundary.

Source 14 lines

Mermaidusecase.mmd

---
title: Online store
---
usecase-beta
direction LR
actor Customer
systemBoundary Store[Online store]
 Browse("Browse products")
 Pay("Pay for order")
 Authenticate("Authenticate")
end
Customer --> Browse
Browse ..> : include Authenticate
Pay --|> Browse

Edit in playground

Event modeling

Screens, commands, events and views across time frames.

Source 14 lines

Mermaideventmodeling.mmd

---
title: Shopping cart events
---
eventmodeling
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt Cart.ItemAdded [[ItemAdded01]]
tf 04 rmo Cart.CartView ->> 03
rf 05 pcr InventoryProcessor
timeframe 06 event Inventory.Reserved
data ItemAdded01 `json`{
  "sku": "ABC",
  "quantity": 1
}

Edit in playground

Charts 6

Pie diagram rendered by ChartForgeX from its Mermaid source.

Pie diagram rendered by ChartForgeX from its Mermaid source, dark theme.

Pie

Parts of a whole, with optional values.

Source 6 lines

Mermaidpie.mmd

pie showData
  title Sign-ins by method
  "Passkey" : 8900
  "Authenticator app" : 6200
  "SMS code" : 1300
  "Password only" : 1500

Edit in playground

XY chart

Bars and lines on shared category and value axes.

Source 6 lines

Mermaidxychart.mmd

xychart-beta
  title "Tickets closed per sprint"
  x-axis [S1, S2, S3, S4, S5, S6, S7, S8]
  y-axis "Tickets" 0 --> 120
  bar [48, 61, 57, 72, 80, 77, 94, 103]
  line [48, 61, 57, 72, 80, 77, 94, 103]

Edit in playground

Sankey

Flows between stages, sized by volume.

Source 10 lines

Mermaidsankey.mmd

---
title: Sign-ins by network and method
---
sankey-beta
Office network,Passkey,5200
Office network,Authenticator app,3100
Remote,Passkey,3700
Remote,Authenticator app,3100
Remote,SMS code,1300
Remote,Password only,1500

Edit in playground

Radar

Several measures compared on radial axes.

Source 7 lines

Mermaidradar.mmd

radar-beta
  title Security posture
  axis mail["Mail auth"], dnssec["DNSSEC"], tls["TLS"], ct["CT"], policy["Policy"]
  curve current["Current"]{91, 72, 88, 95, 79}
  curve target["Target"]{95, 90, 95, 95, 90}
  min 0
  max 100

Edit in playground

Treemap

Hierarchical totals as nested rectangles.

Source 11 lines

Mermaidtreemap.mmd

---
title: Device inventory
---
treemap-beta
"Infrastructure"
    "Identity": 42
    "Messaging": 18
    "Endpoints"
        "Windows": 24
        "macOS": 9
        "Linux": 6

Edit in playground

Quadrant

Items placed on two axes split into four quadrants.

Source 12 lines

Mermaidquadrant.mmd

quadrantChart
  title Feature priorities
  x-axis Low effort --> High effort
  y-axis Low impact --> High impact
  quadrant-1 Plan carefully
  quadrant-2 Do now
  quadrant-3 Maybe later
  quadrant-4 Avoid
  Dark theme: [0.25, 0.85]
  PNG export: [0.7, 0.8]
  Tooltips: [0.35, 0.4]
  Custom fonts: [0.8, 0.3]

Edit in playground

Thinking tools 6

Mind map

Ideas branching out from a central topic.

Source 17 lines

Mermaidmindmap.mmd

---
title: What ChartForgeX covers
---
mindmap
  root((ChartForgeX))
    Outputs
      SVG
      PNG
      HTML
    Authoring
      Fluent C#
      Markdown fences
      Mermaid
    Hosts
      Reports
      Email
      Dashboards

Edit in playground

Tree view

A folder or outline hierarchy.

Source 11 lines

Mermaidtreeview.mmd

---
title: Repository layout
---
treeView-beta
    "src"
        "ChartForgeX"
            "VisualBlocks"
        "ChartForgeX.Mermaid"
            "MermaidParser.cs"
            "MermaidTreeViewParser.cs"
    "README.md"

Edit in playground

Venn

Overlapping sets and what their intersections share.

Source 10 lines

Mermaidvenn.mmd

venn-beta
title Capability overlap
set API ["API"] : 60
set UI ["UI"] : 55
set Ops ["Operations"] : 45
union API,UI ["Shared UX"] : 18
union API,Ops ["Automation"] : 12
union UI,Ops ["Runbooks"] : 8
union API,UI,Ops ["Platform"] : 5
text API,UI note ["Reviewed"]

Edit in playground

Ishikawa

Causes grouped by category behind one effect.

Source 12 lines

Mermaidishikawa.mmd

---
title: Why the release slipped
---
ishikawa-beta
Delayed release
  People
    Handoffs
      Timezone gaps
  Process
    Late review
  Platform
    Slow build

Edit in playground

Wardley

Components mapped by visibility and evolution.

Source 22 lines

Mermaidwardley.mmd

wardley-beta
title Platform map
size [900, 600]
evolution Genesis -> Custom Built -> Product -> Commodity
anchor User [0.95, 0.05]
component Portal [0.80, 0.35] inertia
component API [0.70, 0.45] (build)
component Identity [0.55, 0.65] label [-12, 18]
User -> Portal
Portal +'uses'> API
API -.-> Identity;optional
evolve API 0.75
note "Operational pressure" [0.35, 0.75]
annotations [0.12, 0.88]
annotation 1, [0.60, 0.50] "Improve automation"
accelerator Faster [0.42, 0.62]
deaccelerator Risk [0.48, 0.68]
pipeline API {
  component Build [0.30]
  component Buy [0.55]
  component Commodity [0.80]
}

Edit in playground

Cynefin

Situations sorted into Cynefin decision domains.

Source 13 lines

Mermaidcynefin.mmd

cynefin-beta
title Service decisions
complex
 "Discover demand"
complicated
 "Analyze capacity"
chaotic
 "Contain outage"
clear
 "Run checklist"
confusion
 "Investigate context"
complex --> complicated : "Learn"

Edit in playground

Recognised, not drawn yet 3

ZenUML
Sequence diagrams written as code-like statements.
Diagnostic Mermaid diagram kind 'zenuml' is recognized but not implemented yet.
Agentflow
Agent and tool call flows.
Diagnostic Mermaid diagram kind 'agentflow-beta' is recognized but not implemented yet.
Railroad
Grammar rules drawn as railroad tracks.
Diagnostic Mermaid diagram kind 'railroad-beta' is recognized but not implemented yet.

Semantics follow Mermaid.js 12.1.0, with conformance tests pinned against Mermaid 10.9.8 and 11.17.2. The support matrix lists every family and option.

Use it from .NET

The atlas renders come from these calls. Install ChartForgeX.Mermaid for diagrams, and the Markdown bridge when documents hold mermaid fences.

Render Mermaid from C#

using ChartForgeX.Mermaid;
using ChartForgeX.VisualArtifacts;

MermaidRenderResult result = MermaidRenderer.Render(source);
if (!result.HasErrors && result.Artifact != null) {
    result.Artifact.SaveSvg("diagram.svg");
    result.Artifact.SavePng("diagram.png");
}

Check result.Diagnostics even when rendering succeeds. Warnings identify syntax or configuration that was kept without an exact visual interpretation.

Render Mermaid fences in Markdown

Add ChartForgeX.Markup.Mermaid when Markdown documents contain mermaid fences. The bridge keeps the dependency boundary clean: ChartForgeX.Mermaid owns parsing and conversion, and the markup bridge only adapts fence metadata and diagnostics.

using ChartForgeX.Markup.Mermaid;

var result = new MermaidVisualMarkupParser().Parse(markdown);

How rendering differs from Mermaid.js

Diagrams are laid out and drawn by ChartForgeX, so the output uses your ChartForgeX theme and typography rather than Mermaid's CSS.
The default and dark source themes select static palettes. Other themes and settings produce approximation warnings.
Accessible titles and descriptions from accTitle and accDescr become the SVG's accessible name and description.
Remote fonts are never fetched; native font resolution uses the registered fonts and fallbacks.

The support matrix lists the status of each family and option.

Family atlas

Flows and structure 10

Flowchart

Sequence

Class

State

Entity relationship

Requirement

Architecture

C4

Block

Packet

Planning and process 8

Gantt

Timeline

Journey

Kanban

Git graph

Swimlane

Use case

Event modeling

Charts 6

Pie

XY chart

Sankey

Radar

Treemap

Quadrant

Thinking tools 6

Mind map

Tree view

Venn

Ishikawa

Wardley

Cynefin

Recognised, not drawn yet 3

ZenUML

Agentflow

Railroad

Use it from .NET

Render Mermaid from C#

Render Mermaid fences in Markdown

How rendering differs from Mermaid.js