- 4 minutes to read

Mermaid View

Every diagram in C4 Diagrams 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 gives you a portable, embeddable diagram that renders natively in GitHub, Confluence, Azure DevOps, Notion, SharePoint, and any other Mermaid-capable tool.

What Mermaid View Shows

Mermaid View gives you a text-based version of the current diagram. It is useful when you want a shareable view that can be pasted into documentation tools or copied into another Mermaid-capable system.

It focuses on the same architecture you see in the designer:

  • The diagram keeps the current shape of the architecture
  • The output stays readable in external tools
  • The view is read-only, so it cannot change the diagram itself

Tip

The Mermaid View follows the rules of the Mermaid language, so a node keeps its icon only when its Component Type uses a Font Awesome icon. Azure architecture icons, custom uploads, and the Mermaid logo are images and are dropped here and in every Mermaid export. Give Component Types Font Awesome icons when diagrams will be shared as Mermaid; see How Icons Render in C4 and Mermaid.

Action menu on a Diagram Set with the View Mermaid item highlighted (7.x)
Example of opening the Mermaid View from the Action menu, next to View, View Mapify, Edit, and Hard Delete.

Example Output

The following is an example of Mermaid C4Container markup auto-generated by Nodinite

C4Container title API-Led Architecture (auto-generated from Repository) Person(partnerUser, "Partner", "External partner placing orders") Person(mobileUser, "Mobile User", "Uses the mobile app") Person(webUser, "Web User", "Uses the web portal") Boundary(experienceApis, "Experience APIs") { Container(edi850, "EDI 850", "BizTalk", "Receives purchase orders") Container(mobileApi, "Mobile API", "ASP.NET Core", "Handles mobile requests") } Boundary(processApis, "Process APIs") { Container(outbound, "Outbound", "Logic Apps", "Orchestrates outbound flows") Container(inbound, "Inbound", "Logic Apps", "Processes inbound messages") } Boundary(systemApis, "System APIs") { Container(purchaseOrders, "Purchase Orders", "REST/SQL", "CRUD for PO data") Container(shipments, "Shipments", "REST/SQL", "Manages shipment records") } System_Ext(erp, "ERP", "Handles financial transactions") System_Ext(wms, "WMS", "Manages warehouse and shipments") Rel(partnerUser, edi850, "Sends EDI 850", "AS2/SFTP") Rel(mobileUser, mobileApi, "Uses", "HTTPS") Rel(shipments, wms, "Reads/Writes", "REST")

Diagram Level and Mermaid Type

The diagram type you select when you create the diagram controls which Mermaid C4 header Nodinite emits. When you Import 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 standard Nodinite Mermaid viewer, so no separate setup 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 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.md or 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

A headless export endpoint returns the diagram as SVG, PNG, Mermaid markup, Structurizr DSL, PlantUML, or Draw.io XML, always reflecting the current state. See Export and Sharing for the URLs, embedding options, 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 is useful for quick ad-hoc exploration.

The C4 Diagram Mermaid View is the diagram page for persistent, publishable architecture documentation.

Both capabilities are valuable and serve different use cases.

Next Steps