Mermaid Diagrams
Mermaid lets you author architecture diagrams as text in docs. Use it when you want a high-level visual map before code demos.
Official docs: Intro, Getting Started, Flowchart Syntax, All Syntax.
Source file: showcase/mermaid.html
When To Use Mermaid
- Show overall structure before implementation details.
- Communicate layout regions, data flow, or lifecycle at a glance.
- Keep diagrams versionable in plain text inside docs pages.
Setup
Include Mermaid from CDN and initialize it after the page loads. For bundlers, deployment options, and advanced configuration, see Usage and MermaidConfig reference.
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>
if (typeof mermaid !== "undefined") {
mermaid.initialize({
startOnLoad: true,
securityLevel: "loose",
theme: document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "default"
});
}
</script>Basic Flow Diagram
Write diagram text in a .mermaid block; Mermaid renders it into an SVG.
flowchart LR
A[Design Tokens] --> B[Components]
B --> C[Showcase Docs]
C --> D[Consumer App]
flowchart LR
A[Design Tokens] --> B[Components]
B --> C[Showcase Docs]
C --> D[Consumer App]Layout Architecture Example
Use Mermaid to describe high-level regions before inset demos.
flowchart TB
A[Topbar] --> B[Page Frame]
B --> C[Sidebar]
B --> D[Main Content]
B --> E[Outline Rail]
flowchart TB
A[Topbar] --> B[Page Frame]
B --> C[Sidebar]
B --> D[Main Content]
B --> E[Outline Rail]Recommended Pattern In Docs
- Title the section as "Architecture".
- Place Mermaid diagram first for context.
- Follow with concise explanation and a live inset component demo.
- Optionally link to a full-page mock for complete context.