TemplatesDocsPricingBlog
Map your stackSign in
Export formats

Export formats

A Canopy map is portable. Export it to the formats your team and your agents already use.

Formats

  • architecture.md: the canonical Markdown description of your system.
  • CLAUDE.md / AGENTS.md: AI context files that live in your repo.
  • README.png: a rendered diagram for your README.
  • diagram.fig: an editable Figma frame. Pro
  • JSON: the structured map data: nodes, edges, positions, and metadata.
  • notion.page: a synced Notion doc. Pro

Free workspaces can export PNG, Markdown, CLAUDE.md, and AGENTS.md with a Canopy credit. Pro unlocks watermark controls plus Figma and Notion.

canopy.json ⇄ canvas

Your canopy.json and the canvas stay in sync both ways. Describe the system as JSON and Canopy renders a live, editable map; drag the map and the canopy.json updates.

canopy.json
{
"nodes": [
{ "id": "web", "icon": "nextdotjs", "spend": "$320" },
{ "id": "api", "icon": "nodedotjs", "spend": "$2.1k" },
{ "id": "db", "icon": "postgresql" },
{ "id": "llm", "icon": "openai" }
],
"edges": [
{ "from": "web", "to": "api" },
{ "from": "api", "to": "db" },
{ "from": "api", "to": "llm" }
]
}
⇄live sync
canvas

web

next.js

api

node·trpc

db

postgres

llm

openai

Edit either side - they stay in sync automatically. See architecture as code for the full field reference.

Add it to your README

There's no iframe or live embed because GitHub strips <iframe> from READMEs anyway. Instead you share the README.png export as a normal Markdown image: export it, host the file, and paste one line. It's a snapshot, so re-export and replace the file when your architecture changes.

README.mdPreview

8starlabs Platform

Our production architecture, mapped with Canopy.

![Architecture](docs/architecture.png)
Made with Canopy
architecture.png

web

next.js

api

node

db

postgres

stripe

payments

llm

openai

Re-export and replace the file whenever your architecture changes.

Export the PNG

In the map editor, open Export → README.png. Free workspaces get a Canopy credit watermark; Pro workspaces can keep the credit or export it clean.

Host the image

Pick whichever is easiest. The file just needs a URL or a repo path:

  • Commit it to your repo. Drop the file at e.g. docs/architecture.png and reference it with a relative path. Versioned alongside your code.
  • Drag-and-drop into GitHub. Paste the image into any issue or PR comment box (don't submit); GitHub uploads it and gives you a …githubusercontent.com URL you can copy. No commit needed.
  • Use any image host. Cloudflare R2, S3, or similar, then use the absolute URL.

Paste the Markdown

Reference the file with a standard image tag:

Markdown
![Architecture](docs/architecture.png)

Using a hosted URL instead of a repo path? Swap it in:

Markdown
![Architecture](https://your-host.com/architecture.png)

Make it clickable (optional)

Wrap the image in a link so readers can open the full, interactive map:

Markdown
[![Architecture](docs/architecture.png)](https://canopy.8starlabs.com/m/your-map)

Keep it current

The PNG is a point-in-time snapshot, not a live view. When your architecture changes, re-export and replace the file. Keep the same filename and the Markdown doesn't change. Need something always-fresh? Point agents at the MCP server instead of a static image.

Next

  • MCP server: let agents query your live map directly instead of a static file.
  • Nodes: the metadata fields that get exported.
  • Spend tracking: cost data included in every export.
PreviousGroups & cost rollupsMapsNext Map syntax (architecture as code)Maps

to paste into any AI.

Ask ChatGPT about this page.

Ask Claude about this page.

Need help? Sign in to chat with support

Have ideas?

General inquiry? Email support.