Mermaid View
Every C4 diagram has a Mermaid View — a read-only rendering of the diagram as valid Mermaid C4 markup. The Mermaid View is independent of the C4 Designer: it reads the same relational rows from the database and produces a portable, embeddable diagram that renders natively in GitHub, Confluence, Azure DevOps, Notion, SharePoint, and any other Mermaid-capable tool.
How It Works
The Mermaid View is powered by the C4MermaidGenerator — a server-side component in the Nodinite Core library. It reads the Architecture Diagram tables (C4DiagramNodes, C4DiagramBoundaries, C4DiagramLinks) and emits valid Mermaid C4 syntax for the diagram type.
The generation process follows a deterministic order:
- Nodes above boundaries — Persons, top-level Internal Systems, and top-level External Systems not assigned to a boundary block
- Boundary blocks — each boundary element wraps its member nodes using the stored boundary type (
Container_Boundary,System_Boundary,Enterprise_Boundary,Deployment_Node, etc.) - Nodes inside boundaries — Container nodes and any System actors that were assigned to a boundary block during the import wizard
- Connectors — emitted from the stored connector rows as
Rel(alias, alias, "Label", "Protocol")orBiRel(...)entries. On static diagrams, each connector message member becomes its own Mermaid relationship even when Interactive View groups same-pair flows into one visible line
Because the generator always reads the same rows in the same order, the output is deterministic — the same diagram data always produces identical Mermaid markup.
Example Output
The following is an example of Mermaid C4Container markup auto-generated by Nodinite
Alias Generation
Node aliases in the generated Mermaid are stable and collision-free because they are derived from the entity type prefix and database ID:
| Entity | Alias pattern | Example |
|---|---|---|
| Service | svc_{ServiceId} |
svc_42 |
| System | sys_{SystemId} |
sys_7 |
| Domain (linked boundary) | dom_{DomainId} |
dom_3 |
| Unbound boundary (label-only) | bnd_{BoundaryId} |
bnd_12 |
| Placeholder node (unresolved entity) | node_{NodeId} |
node_99 |
This means aliases are identical every time the same diagram is generated, making it safe to reference a specific alias in external documentation or automated tooling.
Diagram Level and Mermaid Type
The diagram type selected when creating the diagram controls which Mermaid C4 header is emitted. When importing existing Mermaid markup the type is auto-detected from the keyword on the first line:
| Diagram type | Mermaid output header | When to use |
|---|---|---|
| System Landscape (L0) | C4Context |
Enterprise-wide view of all systems and their relationships |
| Context (L1) | C4Context |
High-level people + systems overview for one central system |
| Container (L2) | C4Container |
Services and technology inside a system boundary |
| Component (L3) | C4Component |
Internal structure of a single service |
| Deployment | C4Deployment |
Infrastructure topology — where containers are hosted |
| Dynamic | C4Dynamic |
Runtime interaction sequence for a specific workflow |
Pages for the Mermaid View
| URL | Purpose |
|---|---|
/repository/architecture/sets/{setId}/diagrams/{id}/view |
Rendered Mermaid diagram with zoom/pan, shareable URL |
/repository/architecture/sets/{setId}/diagrams/{id}/mermaid |
Raw Mermaid markup with copy-to-clipboard button |
The /view page uses the existing Mermaid rendering infrastructure already present in Nodinite — the same engine used by the existing "Show in Mermaid" actions throughout the Repository. No new rendering library is required.
The /mermaid page displays the raw markup so it can be pasted directly into external tools such as GitHub README files, Confluence pages, or the Mermaid Live Editor.
Connector Message Members in Mermaid
On Context, Container, and Component diagrams, Interactive View may show one visible connector labelled 2 flows, 3 flows, or similar. That is a presentation choice to reduce clutter on the canvas.
The Mermaid output stays explicit:
- Each connector message member becomes its own relationship line
- Each member keeps its own label and protocol text
- Optional Message Type links remain Repository metadata and are not written into the Mermaid markup
This means the Mermaid view can look more detailed than the interactive static canvas. That is expected and useful when you want a text representation of every flow rather than the compact presentation used during diagram review.
Sharing and Embedding
Shareable URL
The /view URL is stable and always reflects current data. Share it with team members, stakeholders, or external partners. Every time the URL is opened, the diagram is freshly generated from the current relational rows — no stale screenshots.
Embedding in External Tools
Because the Mermaid markup is standard C4 Mermaid syntax, it renders natively in:
- GitHub — paste into a
README.mdor wiki page inside a```mermaid ```block - Confluence — use the Mermaid macro or a compatible Confluence app
- Azure DevOps — wiki pages support Mermaid natively
- Notion — use the Mermaid code block
- SharePoint — embed via web part or iFrame
- Mermaid Live Editor — for quick sharing and editing
Export Endpoint
The headless export endpoint returns the diagram in multiple formats, always reflecting the current state:
| Format | URL | Use case |
|---|---|---|
| PNG image | /api/repository/architecture/sets/{setId}/diagrams/{id}/export.png |
Embed in Word, PowerPoint, Confluence |
| SVG vector | /api/repository/architecture/sets/{setId}/diagrams/{id}/export.svg |
High-quality print, scalable embedding |
| Mermaid markup | /api/repository/architecture/sets/{setId}/diagrams/{id}/export.md |
Paste into any Mermaid-capable tool |
| Draw.io XML | /api/repository/architecture/sets/{setId}/diagrams/{id}/export.drawio |
Import into draw.io / diagrams.net for manual editing |
See Export and Sharing for full details on export formats and automation.
Relationship to the Existing "Show in Mermaid" Feature
The existing "Show in Mermaid" action on individual Repository entities (Integrations, Services, Systems) continues to work unchanged. It provides a quick, read-only fly-by-wire rendering of whatever relationships exist in the live graph at that moment.
The C4 Diagram Mermaid View is a separate, superior capability:
| Existing "Show in Mermaid" | C4 Diagram Mermaid View | |
|---|---|---|
| Source of truth | Live entity graph traversal | Designed diagram rows in DB |
| Output stability | Non-deterministic (changes as graph evolves) | Deterministic (same rows → same output) |
| C4 node types | All nodes as <<external_system>> |
Correct types: Person, System_Ext, Container, etc. |
| Layout control | None (Mermaid auto-layout) | Designer-controlled positions |
| Saves and shares | No | Yes — shareable URL, export endpoint |
| Curated content | No (renders entire connected graph) | Yes (only entities the designer placed on canvas) |
Both capabilities are valuable and serve different use cases. Use the existing action for quick ad-hoc exploration; use C4 Diagram Mermaid View for persistent, publishable architecture documentation.