{% diagram %}

Attributes

Parameter	Type	Required	Description
id	string	✓	Unique identifier for the diagram
label	string	✓	Human-readable title shown in the gallery and as caption
type	enum	—	flow | sequence | er | class — default: flow
engine	enum	—	Rendering engine — currently only 'mermaid'

Valid Parent Contexts

This tag is valid inside: {% domain %}, {% feature %}, {% blueprint %}

Embeds an interactive diagram using Mermaid.js, which runs entirely in the browser. All diagrams are automatically collected into the Diagram Gallery in the Reference section. The tag body contains the raw Mermaid DSL.

Interactivity

The rendered diagram component includes:

• Auto-Linking: Nodes and actors are automatically transformed into clickable links if their text matches an existing system entity (like a component or domain). No special Mermaid click or link syntax is required; just write the diagram normally, and the compiler handles the cross-linking securely via DOM processing. This works across all supported Mermaid diagram types (flowcharts, sequence diagrams, state diagrams, class diagrams, etc.).
• Fullscreen Mode: Toggle a full-screen view of the diagram.
• Source View: Toggle a view of the raw Mermaid DSL, helpful for debugging syntax errors.
• Error Overlay: If a diagram fails to render, a descriptive error message is shown over the diagram container.
• Auto-Theme: Automatically adapts to light/dark mode.
• Gallery Integration: Automatically appears in the global system diagram inventory.

Mermaid sequence diagram for authentication flow

tagdiagrammermaid diagram-mermaid-sequence

{% diagram id="auth-flow" type="sequence" label="Authentication Sequence" %}
sequenceDiagram
    User->>Service: Login Request
    Service-->>User: Session Token
{% /diagram %}