Mermaid: Diagramming and charting tool

Mermaid is a Diagrams as Code tool for Diagramming and Charting. Mermaid offers a rich variety of diagram and chart options, including:

• Class Diagrams
• Entity Relationship Diagrams
• Flowcharts
• Gantt Diagrams
• Git Graphs
• Mindmaps
• Pie Charts
• Quadrant Chart
• Sequence Diagrams
• Timeline Diagrams

Example

The following mermaid markdown code block:

flowchart LR
  Start --> Stop

will produce the diagram:

Enabling Mermaid

When you choose Mermaid as an option, the following are added to the Starlight project:

1. Two dependencies are added:
   • rehype-mermaid — used to support the Mermaid dialect in Markdown code blocks
   • playwright — used to render the Mermaid diagrams into images
2. A postinstall script in package.json to install chromium browser support for playwright.
3. The rehypeMermaid plugin is added to the markdown.rehypePlugins Astro configuration.