Atlas Forms
Mermaid Diagram
The mermaid-diagram control renders Mermaid.js markup as an inline SVG. Use it to embed process flowcharts, workflow diagrams, sequence diagrams, Gantt charts, or entity-relationship diagrams alongside a form — giving users visual context for what they are reviewing or approving.
Minimal Example — Flowchart
{
"id": "approval-flow",
"type": "mermaid-diagram",
"label": "Approval Workflow",
"width": "full",
"settings": {
"content": "flowchart LR\n A[Submit Request] --> B{Manager Review}\n B -- Approved --> C[Finance Review]\n B -- Rejected --> D[Notify Requester]\n C -- Approved --> E[Payment Processed]\n C -- Rejected --> D"
}
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
content | string | — | Raw Mermaid markup. Use \n for line breaks in JSON strings. |
theme | default | dark | forest | neutral | default | Mermaid colour theme |
zoom | boolean | false | Allow the user to zoom and pan the diagram with mouse/touch |
maxWidth | string (CSS) | "100%" | Maximum SVG width — useful for constraining very wide diagrams |
align | left | center | right | center | Horizontal alignment of the rendered SVG |
Sequence Diagram
{
"id": "api-sequence",
"type": "mermaid-diagram",
"label": "Order Processing Flow",
"settings": {
"content": "sequenceDiagram\n participant U as User\n participant F as Form\n participant W as Workflow\n participant P as Payment API\n U->>F: Submit Order\n F->>W: Trigger Execution\n W->>P: Create Payment Intent\n P-->>W: intent_id\n W->>F: Update Context\n F-->>U: Show Confirmation",
"theme": "default"
}
}Gantt Chart
{
"id": "project-timeline",
"type": "mermaid-diagram",
"label": "Project Timeline",
"settings": {
"content": "gantt\n title Q3 Delivery Schedule\n dateFormat YYYY-MM-DD\n section Design\n Requirements :done, des1, 2025-07-01, 2025-07-07\n UI Mockups :active, des2, 2025-07-08, 14d\n section Development\n Backend API :dev1, after des2, 21d\n Frontend :dev2, after des2, 18d\n section Testing\n UAT :test1, after dev1, 10d",
"theme": "default",
"maxWidth": "800px"
}
}Entity Relationship Diagram
{
"id": "data-model",
"type": "mermaid-diagram",
"label": "Data Model",
"settings": {
"content": "erDiagram\n CUSTOMER ||--o{ ORDER : places\n ORDER ||--|{ LINE-ITEM : contains\n CUSTOMER {\n string id\n string name\n string email\n }\n ORDER {\n string id\n date placedAt\n float total\n }\n LINE-ITEM {\n string productId\n int quantity\n float unitPrice\n }",
"theme": "default",
"zoom": true
}
}Supported Diagram Types
| Type | Keyword | Use For |
|---|---|---|
| Flowchart | flowchart LR / TD | Process flows, decision trees |
| Sequence Diagram | sequenceDiagram | API interactions, message exchanges |
| Gantt Chart | gantt | Project timelines, schedules |
| Class Diagram | classDiagram | Object models, inheritance |
| ER Diagram | erDiagram | Database schemas, data models |
| State Diagram | stateDiagram-v2 | State machines, status flows |
| Pie Chart | pie | Simple part-to-whole (use chart-pie for interactive) |
| Git Graph | gitGraph | Branch and merge history |
Dynamic Diagrams from Context
The
content field supports template expressions, so you can generate Mermaid markup server-side and inject it via the form context. For example, a workflow approval node can generate a dynamic flowchart showing the actual approval path taken, then store the markup in context.diagram.approvalFlow — the control renders it immediately.
Performance with Large Diagrams
Mermaid renders SVG synchronously in the browser. Diagrams with more than 100 nodes may cause a noticeable rendering pause. For very large graphs, consider server-side SVG rendering and embedding via the
image display control instead.