# Diagrams in CoPage > CoPage diagrams are editable architecture, cloud, network and process diagrams that people and AI agents build together, with the official AWS, Azure and Google Cloud icons built in. They import and export draw.io files, export SVG and PNG for docs, and appear on slides as linked diagrams that update everywhere. A diagram in CoPage is its own document: an open canvas of icons, shapes, text and connectors. Your agent draws it with edit operations, looks at a render and runs checks; you adjust it in the diagram editor. The same diagrams work in the free [CoPage CLI](/docs/cli) (on your computer) and in the CoPage app (in your workspace, early access). ## Icons More than 3,500 icons are built in and work offline. Agents find them with `find_assets` (or `copage assets --collection aws`); people use the Icons panel in the editor. | Pack | Source | Icons | | --- | --- | --- | | AWS | AWS Architecture Icons: services, resources and groups (VPC, subnet, region…) | 800+ | | Azure | Azure Public Service Icons | 600+ | | Google Cloud | Google Cloud product and category icons, current and legacy style | 250 | | General | Lucide line icons: devices, people, arrows, charts, security, business | 1,800+ | The cloud icons are the providers' own, used under their terms for architecture diagrams and documentation. You can add your own icons and images too (`add_asset`, or `copage import --kind icon`). ## Shapes and connectors Besides icons, the editor's Shapes picker has boxes, rounded boxes, ellipses, decisions (diamonds), hexagons, steps (chevrons), start and end pills, and containers for boundaries such as a VPC, subnet or tier. A connector is a line between two elements that follows them when they move: - **Ends:** attached to an element (on a chosen side, or the nearest one) or to a free point. - **Route:** elbow (right angles, the default), straight or curve. - **Arrowheads:** arrow, none or dot, at either end. - **Style:** solid, dashed or dotted, with a color, a width and a label on the line. Deleting an element deletes its connectors. The Diagram essentials check pack flags connectors that aren't attached at both ends, icons without labels, stacked shapes and anything left unconnected. See [Checks](/docs/checks). ## How an agent draws a diagram 1. `create_diagram` with a title and edit operations: icons with labels, shapes, boundaries, connectors. 2. `render_diagram` to look at the result as a PNG, and fix overlaps, crossing lines and cramped labels. 3. `check_diagram` to catch loose connectors and unlabelled icons, then fix and check again. 4. `edit_diagram` for later changes. Every edit applies completely or not at all, and people's hand edits since the agent's last change are kept. With the CLI, the same steps are `copage diagram new`, `render`, `check` and `apply`. See [Connect AI agents](/docs/agents) for the MCP tools. ## Export for docs | Format | Opens in | Edit it again | | --- | --- | --- | | SVG | Browsers, Markdown, READMEs, wikis | Yes: the diagram is inside the file | | PNG | Anywhere | Yes, from the CLI: the diagram is inside the file | | .drawio | draw.io (diagrams.net), icons embedded | In draw.io, or import it back into CoPage | | .json | CoPage's own format | Import it back, or give it to an agent | The CLI's SVG and PNG exports carry the diagram inside (an SVG `` element, a PNG text chunk), without its comments and notes. `copage diagram open docs/architecture.svg` opens the picture in the editor again. The CLI also remembers where each diagram was exported and rewrites those files when the diagram changes, so the picture in your docs stays current: ```bash copage diagram export checkout-1a2b docs/checkout.svg copage diagram open docs/checkout.svg ``` In the app, Download offers SVG, PNG (2400 px wide), draw.io and JSON; agents save files with `export_file`. ## draw.io import and export CoPage reads `.drawio` and `.xml` files from draw.io (diagrams.net), compressed or not, and the PNG and SVG files draw.io exports with the diagram inside. - Each draw.io page becomes its own CoPage diagram. - AWS, Azure, Google Cloud and common network shapes become the built-in icons, matched by name. - Edges become connectors attached to the same elements. - The import lists anything that didn't map exactly. Export writes an uncompressed `.drawio` file with the icons embedded, so it opens in draw.io without CoPage. ```bash copage diagram import old.drawio copage diagram export checkout-1a2b checkout.drawio ``` Agents use `import_drawio` and `export_drawio`. ## Diagrams on slides (CoPage app, early access) A diagram goes on a slide as a linked diagram: change the diagram once and every slide that shows it updates. On a slide it takes the deck's theme. To change it for one slide only, an agent forks it (`fork_diagram`), and that slide switches to the copy. In a PowerPoint export, a linked diagram goes in as one vector picture. The CoPage app is in early access: [request access](/#early-access). ## Questions ### Does CoPage have official AWS, Azure and Google Cloud icons? Yes. The AWS Architecture Icons, the Azure Public Service Icons and the Google Cloud icons are built in, with a set of general Lucide icons: more than 3,500 in all, offline. ### Can I import draw.io diagrams into CoPage? Yes. `.drawio` and `.xml` files, and PNG or SVG files exported by draw.io with the diagram inside. Each page becomes a diagram, cloud and network shapes become CoPage icons, and edges become connectors. ### Can I edit an exported diagram SVG again? Yes. SVG files exported by CoPage carry the diagram inside. Open one with `copage diagram open .svg`; PNG files exported by the CLI work the same way. ### Can I export a CoPage diagram to draw.io? Yes. Export as `.drawio`; the icons are embedded, so the file opens in draw.io (diagrams.net) without CoPage. ### How do I keep the architecture diagram in my README up to date? Export it with the CLI (`copage diagram export docs/architecture.svg`). The CLI remembers the file and rewrites it when the diagram changes while the editor runs; `copage diagram export ` rewrites it on demand.