Skip to main content
Tools

Visualizing Architectures in Docs

⏱ 1 min readEdit on GitHub ↗

CALM architectures can be embedded directly in Docusaurus pages — the same way you would embed a Mermaid diagram, but driven by your real, validatable architecture file instead of a hand-drawn sketch.

The diagram below renders calm-platform.calm.json, the CALM self-description of the CALM platform itself. It is generated at build time as a static SVG (works without JavaScript, indexed by search engines) and upgrades in the browser to an interactive view — scroll to zoom, drag to pan, click nodes for details.

CALM Hub System system CALM User actor CALM CLI service CALM Hub API service CALM Hub UI system MongoDB database
CALM Hub System system CALM User actor CALM CLI service CALM Hub API service CALM Hub UI system MongoDB database

Usage

import { CalmDiagram } from '@finos/calm-docusaurus-plugin'

<CalmDiagram src="./architectures/my-system.calm.json" />
PropDefaultDescription
srcRelative path to a .calm.json file, or an https:// URL (fetched client-side).
dataInline architecture object (client-rendered).
themefollows site themeForce light or dark.
flowFlow unique-id to highlight after hydration.
interactivetrueSet false to keep the static SVG only.