Iso Topology

Ask your agent in plain language. Refine the same way. Commit the result.

_{↑ Built by asking — “draw a ClickHouse real-time analytics architecture, dark glass style” — then a few plain-language tweaks (“thicker dashed gradient connectors,” “add a diagonal grid,” “lime accent”). No Figma, no coordinates; it's text you diff.}

single binary · zero runtime deps · renders in ms · 200+ icons incl. real brand logos · every sample golden-tested

Documentation · Quickstart · Gallery

English · 简体中文

The only diagram-as-code tool where the output is design-grade isometric, the DSL is a machine-checkable contract your agent self-corrects against, and it runs deterministically offline in one static binary. The alternative is an afternoon in Figma (not diffable, dead the moment the infra changes) or Mermaid/D2 (flat flowcharts). This gives you the Figma look from text — generated by your agent, validated before render, committed next to your code.

Prefer to write it yourself? It's just text.

Presets define the look once; layout / place relations do the positioning — never pixel coordinates. From this:

theme:
  presets:
    heroBlue:                                  # the one glowing accent, reused by name
      stroke: { color: "#6FA8E0", width: 1.6 }
      faces: { top: { fill: { kind: linearGradient, stops: [ {offset: 0, color: "#1A3550"}, {offset: 1, color: "#0E1C30"} ] } } }
      effects: { faceSplit: true, backglow: { color: "#6BA8E8", radius: 70 } }
nodes:
  scene:
    parts:
      - id: runtime
        shape: group
        layout: { mode: column }               # ← auto-arranged, no coordinates
        parts:
          - { id: agent,  preset: heroBlue, icon: "iso://si/langchain/8FBEEF", label: "LangGraph Agent" }
          - { id: memory, icon: "iso://glyph/database", label: "Memory · State" }
    connectors:
      - { from: client, to: runtime, routing: orthogonal,
          stroke: { gradient: { from: "#3B6FD4", to: "#8FBEEF" } } }   # glowing flow

…renders to this — a typical LangChain agent app, in LangChain's own dark/cool-blue style:

A deterministic solver turns relations into geometry — every scene here is coordinate-free. Source.

Start in 60 seconds

By hand — one static binary, no browser or fonts needed:

go install github.com/MarkovWangRR/iso-topology/cmd/isotopo@latest
echo 'user -> api -> db' > scene.d2     # any d2 graph → auto-layout
isotopo render scene.d2 ./out           # → out/topology.svg (+ html + per-node SVGs)
isotopo serve  scene.d2                 # → localhost:8731 — drag, restyle, export

With your agent (Claude Code, Cursor, …) — wire it up once (commands below are tested):

go install github.com/MarkovWangRR/iso-topology/cmd/isotopo@latest      # the renderer
go install github.com/MarkovWangRR/iso-topology/cmd/isotopo-mcp@latest  # MCP server
claude mcp add isotopo -- isotopo-mcp                                   # register with Claude Code

Then just ask in plain language and refine the same way — the agent runs the capabilities → validate → render loop for you:

"draw a ClickHouse real-time analytics architecture, dark glass style" "make the connectors thicker, dashed, with a gradient" "add a diagonal grid to the background and brighten the node borders"