Apple-clean 2D
Glass cards with soft corners, quiet edges and real type. Light and dark. Glow only where you look.
Open source · MIT
Mermaid, with
the calm of a native app.
Everything is a process. You understand a process when you watch it flow.
Live. Double-click API Gateway to go deeper · Esc back · Space plays the flow.
3D, isometric
Flip a flowchart into a hairline model. Groups float as layers. One option: mode: "3d".
Step by step
Play the flow, pause, step back. Joins wait for every branch, and you can mark waits with a comment.
Quick start
You keep writing Mermaid. Prism only changes how it is drawn, and falls back to stock Mermaid if it can't.
Install
npm install mermaid-prism mermaid # coming soon, not on npm yetRender
Until it's published: clone the repo, run npm run build, and depend on it with npm link or a file: path.
Try it
Edit the Mermaid on the left. It renders as you type.
3D
The same Mermaid, as an isometric model. Drag to orbit, scroll to zoom, double-click a plate with a stack under it.
Examples
Copy any of these. They are plain Mermaid; the %% @prism lines are comments that stock Mermaid ignores.
Waits, in one line
Tell the player where something takes time. It stays a Mermaid comment, so GitHub still renders your diagram.
%% @prism wait <id> <duration> "reason"
%% @prism wait auth 2s "token check"Effects are on: a yes edge draws a check, no shakes, timeout runs a clock. Reqvar vocabulary colours edge kinds (regulates, blocks, senses…). Drill with %% @prism diagram and %% @prism drill. Double-click a marked node; Esc steps back.
Watch it
Silent product film, about 70 seconds. Same renderer as this page.
For agents
Prism ships a skill that teaches coding agents how to embed it and how to write diagrams that look great.