Mermaid Rendering
New 7.4.0
The Mermaid Rendering modal gives you a rich, static diagram of how any entity in your Nodinite CMDB relates to everything around it. Open it from any entity detail page to instantly visualize relationships in the context you are already working in—no separate Mapify license required.
✅ Nine completely different diagram types for the same data
✅ Direction rotation, zoom, and fullscreen for comfortable reading
✅ Print or export to SVG, PNG, or JPG in one click
✅ Copy raw Mermaid source to paste into GitHub, Confluence, Notion, and more
✅ Available without a Mapify license
For interactive, physics-based graph exploration with drag-and-drop nodes, see Mapify Rendering.
Nine Diagram Types
The most powerful feature of the Mermaid Rendering modal is the ability to switch between nine completely different ways to look at the same data. Use the icon buttons in the toolbar to change diagram type at any time.
| Diagram | When to use it |
|---|---|
| Flowchart | The default, general-purpose view. Shows every entity as a box and every relation as an arrow. Works for any topology, including circular dependencies. Best for a quick overview. |
| Entity-Relationship (ER) | Best when you want to see the properties of each entity alongside its connections—similar to reading a database schema. Useful for auditors or architects inspecting what fields an entity carries. |
| Mindmap | Perfect for exploring how one entity fans out to its neighbours in a radial, tree-like layout. Especially clear when the data has a natural hierarchy with no circular references. |
| C4 Context Diagram | Arranges entities as C4-style boxes inside a boundary. Ideal for architectural discussions about systems, services, and applications—the language most architects and developers already speak. |
| Architecture (beta) | Stacks entities in distinct horizontal layers by type. Best for small, strictly layered topologies. Automatically disabled when the data is too complex or contains cycles. |
| Class Diagram | Presents each entity as a UML class with its attributes listed inside and connections shown as UML associations. Great for structured, technical reviews where entity details matter as much as the connections. |
| Dependency View | Traces the full chain of dependencies both upstream and downstream from the focal entity. Answers: what does this depend on, and what depends on it? Essential for change-impact analysis. |
| Impact View | Shows the downstream blast radius if the focal entity were to fail or change. The focal entity is highlighted in red, directly impacted entities in orange, and unrelated entities are muted. Use this before making a change to understand the risk. |
| Domain View | Groups entities by their CMDB type into separate zones and shows only the cross-type connections. Useful for high-level architectural conversations about how different domains interact. Requires at least two distinct entity types in the data. |
Diagram type buttons are automatically greyed out when they are not suitable for the current data. Hovering over a disabled button tells you exactly why it is disabled.
Direction Rotation
For diagram types that support it—Flowchart, Dependency View, and Impact View—you can rotate the layout direction using the left and right arrow buttons in the toolbar.
The four options cycle through:
- TD — top-to-bottom
- LR — left-to-right
- BT — bottom-to-top
- RL — right-to-left
Some diagrams are far clearer when laid out horizontally rather than vertically, especially long dependency chains. Rotating takes one click and re-renders instantly.
Edge Labels
Toggle the Labels button to show or hide the text on relationship lines.
- Labels on — see the type or name of each relationship, useful when you need to understand why two entities are connected.
- Labels off — a cleaner view that makes it easier to see the overall shape of the graph at a glance.
Zoom Controls
Three zoom buttons sit in the toolbar:
- Zoom in / Zoom out — step through preset zoom levels: 25%, 50%, 75%, 100%, 125%, 150%, 200%, 300%.
- Reset — click the percentage readout in the middle to jump back to 100% and re-centre the diagram.
- Mouse wheel — zoom in and out directly on the diagram; the percentage indicator keeps in sync.
Use zoom when a diagram is too dense to read at 100%, or when you want to export a higher-resolution version.
Fullscreen Mode
Click the expand icon in the modal header to maximise the diagram to fill the entire browser window. Click compress to return to the normal large-dialogue size.
Large diagrams with many nodes benefit enormously from fullscreen—you get significantly more canvas space, which reduces overlap and makes the layout much more readable.
Refresh
Click the Refresh button (rotating arrows) to reload the latest data from the server and re-render the diagram. The icon spins while loading.
Use refresh when another user has just updated relationships in the CMDB, or when you navigated to the diagram immediately after making a change yourself—refresh ensures you are looking at the current state.
Click the Print button to send the diagram directly to your browser's print dialogue. The rest of the page is hidden automatically so only the diagram is printed.
Useful for documentation runs, handover meetings, architecture reviews, or any time you need a physical or PDF copy of a relationship diagram.
Copy Mermaid Source
Click the Copy button to place the raw Mermaid diagram source code on your clipboard. A brief Copied! confirmation appears when it succeeds.
You can paste the source directly into any tool that supports Mermaid—GitHub, GitLab, Confluence, Notion, VS Code, and many others—to embed the same diagram in your documentation without any extra work.
Download as Image
Click the Download button to export the diagram as a file. Three formats are available:
| Format | Best for |
|---|---|
| SVG | Documentation, wikis, and anywhere you need an infinitely scalable vector image. Stays sharp at any size. |
| PNG | Presentations, tickets, emails, or any context where a standard raster image is expected. |
| JPG | Situations where file size matters more than background transparency, for example embedding in a Word document. |
A spinner overlay appears while the image is being generated. You can cancel at any time if it takes longer than expected.
Entity Information Panel
When the entity has a description or a website URL stored in the CMDB, these are shown in a small panel just below the modal header. The website link opens in a new tab.
You get context about the entity you are looking at without having to navigate away or open a separate page.
Keyboard Shortcut
Press Escape at any time to close the modal.
Next Step
Explore relationships interactively with Mapify Rendering
View Mode in Mapify Overview