TopoViewer
Build interactive network and service diagrams from YAML. Keep stable object IDs, relationships, and reusable styles in Git; use the same bundle in documentation, React applications, and Studio.
Build a docs page
Python and MkDocs · two routers and one link Embed in React
A small component with selection and diagnostics Create visually
Hosted Studio · create, save, export, and reopen
Python and MkDocs · two routers and one link Embed in React
A small component with selection and diagnostics Create visually
Hosted Studio · create, save, export, and reopen
See The Result
The Payments walkthrough compares normal, degraded, and recovered states using the same object identities. These are authored example states; TopoViewer renders the supplied model.
Find Your Next Task
| Task | Guide |
|---|---|
| Choose graph objects and relationships | Choose graph objects |
| Write and validate a YAML bundle | Create a bundle · Validate YAML |
| Embed in a product or documentation | Integration guides |
| Borrow a visual technique | Examples and guided scenarios |
| Look up a field, style key, or callback | Fields · Styles · Component props |
| Diagnose a problem or upgrade | Troubleshooting · Upgrade |
React and MkDocs are Supported. The Zensical adapter is Supported Adapter; Browser Studio is Beta Preview; Desktop Studio and Grafana are Experimental. See compatibility before choosing a host.