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

Every workspace can export PNG, Markdown, CLAUDE.md, and AGENTS.md. Each export carries a small "Made with Canopy" badge - always, on every plan. Pro adds Figma and Notion exports.

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", "label": "Web", "brand": "nextdotjs", "cost": "$320" },

{ "id": "api", "label": "API", "brand": "nodedotjs", "cost": "$2.1k" },

{ "id": "db", "label": "DB", "brand": "postgresql" },

{ "id": "llm", "label": "LLM", "brand": "openai" }

"edges": [

{ "source": "web", "target": "api" },

{ "source": "api", "target": "db" },

{ "source": "api", "target": "llm" }

]

}

⇄live sync

canvas

web

next.js

api

node·trpc

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

A live map instead of a screenshot

An exported PNG is a snapshot that goes stale. An embedded map updates whenever you save, and GitHub proxies the image through its own CDN so it costs you almost nothing to serve.

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

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. Every export carries the "Made with Canopy" badge.

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.

MCP server: let agents query your live map directly instead of a static file.
Nodes: the metadata fields that get exported.
Intel: cost data included in every export.

PreviousEmbed a mapMaps Next Map syntax (architecture as code)Maps

to paste into any AI.

Ask ChatGPT about this page.

Ask Claude about this page.

Need help?

Have ideas?

General inquiry? Email support.