Architecture diagrams your coding agent draws, checks and fixes

CoPage is not an AI model. Your coding agent does the thinking: it reads your code, Terraform or notes and decides what goes on the diagram. CoPage gives it a canvas, 3,000+ icons that work offline, a picture of what it drew and a list of what's messy. You get a real diagram file, not a screenshot, that you and the agent can both keep editing.

#How it works

1. Set up the project once.

   cd my-project
   copage init                 # diagrams live in ./.copage, next to your code
   copage skill install        # teaches your agent the copage commands

   Prefer MCP? copage connect claude (or cursor, vscode, codex) adds a local MCP server named copage-local to that tool's settings instead.

2. Ask your agent. For example: "Draw our checkout architecture on AWS from the Terraform in infra/ and put it in docs/architecture.svg."

3. The agent finds icons and draws. It searches the icon library (copage assets load balancer --collection aws), then creates the diagram from a list of edit operations: icons with labels, boxes for VPCs, subnets or regions, and connectors between them (copage diagram new "Checkout" --ops ops.json). Every batch of edits is applied all or nothing.

4. It looks at what it drew. copage diagram render <id> writes a PNG the agent reads, so it can see overlaps, lines crossing a title or cramped labels, and move things.

5. It runs the checks. copage diagram check <id> reports connectors not attached at both ends, icons without a label, shapes stacked on top of each other, elements left unconnected and leftover placeholder text. The agent fixes them and renders again until the checks pass.

6. It exports for your docs. copage diagram export <id> docs/architecture.svg writes an SVG with the diagram stored inside it. CoPage remembers the file: while the editor is open, later changes rewrite it, and copage diagram export <id> rewrites it at any time.

7. You finish by hand if you want. copage open opens the editor in your browser, and copage diagram open docs/architecture.svg opens the exported picture itself. The next time the agent reads the diagram (copage diagram show <id>), it gets a list of the edits people made since its last change, so it builds on them instead of undoing them.

Agents using MCP do the same with tools: find_assets, create_diagram, edit_diagram, render_diagram and check_diagram.

#What you get

• SVG for Markdown, READMEs and docs sites; PNG for wikis, Word and chat. Both carry the diagram inside (without its comments and notes), so they open in CoPage again.
• .drawio for anyone who uses draw.io (diagrams.net), and .json, CoPage's own format.
• The diagram's source in .copage/diagrams/, which you commit with your code.

Rendering and SVG or PNG export use Chrome, Edge, Chromium or Brave installed on the computer. .drawio and .json exports need no browser.

#Who it's for

• Developers and tech leads who want architecture diagrams in the repo that match the code, updated by the same agent that changes the code.
• Solution architects who draw cloud, network and data flow diagrams and want the first version built for them, then adjust it by hand or by asking.
• Anyone on Windows, macOS or Linux. The CLI is one program with no account, and it sends nothing to us.

It is a good fit where Mermaid is weak: cloud diagrams with official icons, boundaries such as VPCs and subnets, and layouts you want to control. For a small flowchart in a README, Mermaid may be all you need.

#Read more

• CoPage CLI documentation: install, every command, where files live, using it on a work computer.
• Connecting your agent: the skill, MCP and which agents work.
• Checks: what each check looks for.
• Diagrams: elements, connectors, icons and exports.
• Install the free CLI, or see CoPage for enterprise if your team also builds client decks.