Inline diagrams from text using fenced mermaid code blocks.
For diagrams that are not part of the model — flowcharts, ad-hoc sequences, state diagrams — use Mermaid. Mermaid renders from a fenced code block with the mermaid language, keeping diagrams diff-friendly.
Usage
Use a fenced code block tagged mermaid:
```mermaid
graph TD
A[Author spec] --> B[Validate]
B --> C[Generate attachments]
C --> D[Publish docs]
```Renders as:
Use a fenced code block
Mermaid is rendered from a ```mermaid code block. There is no <Mermaid> JSX component in specs.
Mermaid vs model embeds
| Use Mermaid for | Use a model embed for |
|---|---|
| Ad-hoc or illustrative diagrams | Real architecture and behavior |
| Concepts not in the model | Objects, workflows, attachments |
| Quick flow/state sketches | Anything that must stay in sync |
If a diagram describes real architecture, prefer an objects or workflow embed so it stays accurate. Reserve Mermaid for sketches and concepts. See Mermaid component reference.
Last updated on