Toolbox
Trazo
A deterministic, themeable SVG engine for flowcharts, git histories, sequence diagrams, and block wireframes.
Trazo turns diagram source into deterministic, themeable SVG. Build flowcharts, git histories, sequence diagrams, and block wireframes with a pure TypeScript layout engine and an optional React renderer.
Live playground · Documentation
| Diagram | Use it for |
|---|---|
| Flowchart | Show decisions, steps, and paths through a process. |
| Git history | Show commits, branches, and merges. |
| Sequence diagram | Show messages exchanged between participants over time. |
| Block wireframe | Sketch a page or component as a grid of labeled blocks. |
Install
pnpm add @joycostudio/trazoExample
import { flow, layoutFlow } from '@joycostudio/trazo'
import { Graph } from '@joycostudio/trazo/react'
export default function RequestFlow() {
const graph = layoutFlow(flow`
flow LR
A(["Request"]):primary ==> B["Process"]
B --> C(["Done"]):success
`)
return <Graph graph={graph} title="Request flow" />
}The layout functions also work in plain TypeScript without React. In a React app, <Graph> can render in a Server Component and emit SVG in the initial HTML.
More to explore
- Deterministic layout: the same source produces the same positioned graph on the server and client.
- CSS-token theming:
--trazo-*variables override colors, with shadcn tokens and built-in colors as fallbacks. - Optional integrations:
@joycostudio/trazo/remarkrenders and validates diagram fences in Markdown;@joycostudio/trazo/eslintchecks diagram templates in TypeScript.
Read the DSL reference for diagram syntax and the API reference for layouts, rendering, and themes. To work on the monorepo, see the contributor quickstart.