Agent Diagram Export

Preview and export the mermaid diagrams Cursor shows in agent chat, plan files, and markdown — in light or dark mode, as PNG, JPEG, or PDF. Most importantly with taste and style.

Built for Cursor — the AI IDE where agent chats, Plan Mode, and inline mermaid diagrams live. The extension reads Cursor agent transcripts, plan files, and markdown sources directly; it works in VS Code, but every source path and UI integration is tuned for Cursor.

Open preview

When a file has multiple diagrams, the extension shows a Quick Pick labeled with the nearest markdown heading (or the mermaid diagram type if there is no heading). If the cursor is inside a fence, that diagram opens directly.

Supported fence languages: mermaid and mmd. Frontmatter in .plan.md files is skipped when scanning for fences.

Diagram sources

Agent transcripts are read from the workspace’s Cursor agent-transcripts folder. Plan files are discovered in the workspace.

Preview panel

The preview toolbar controls rendering and export:

• Zoom — scroll wheel to zoom; − / + buttons; click the percentage to fit to view
• Pan — drag the canvas
• Light / Dark — switches diagram theme; opens in the mode that matches Cursor’s editor theme
• Mode — picks the drawing style: Default, Golden Era, or Home Computer (see below); writes agentDiagramExport.mode globally
• Export — PNG, JPEG, or PDF; save dialog suggests a filename with the active theme and mode

Export details

Exports rasterize at 3× resolution for sharp output. Default filenames follow {context}-{diagramType}-{light|dark}-{mode}.{ext} (e.g. agent-flow-flowchart-dark-home-computer.png).

Modes

A mode is a drawing style, not a color theme — light and dark still apply, and exports carry the mode because the ink travels inside the SVG. Pick one from the preview Mode menu or set agentDiagramExport.mode.

Golden Era redraws a diagram the way computer architecture was drawn in the 1960s: one ink color on the page, square-cornered boxes with hatched drop shadows, thin ruled connectors, and condensed drafting caps.

Home Computer is the 1977–83 reading of the mode, printed rather than drafted: cream stock inside a double keyline with a registration strip in the corner, flat spot-color blocks with white Helvetica bold caps, heavier right-angle runs, and dashed boundaries around subgraphs. Blocks take the next spot color in layout order, and the dark theme prints the same colors on a dark page.

With either mode on, all diagram types route through Mermaid’s classic renderer so the ink pass can reshape connectors, shadows, and blocks consistently.

Commands

All commands appear under Agent Diagram Export in the Command Palette.

Settings

Example in settings.json:

{
  "agentDiagramExport.mode": "homeComputer"
}

Install

Install from the packaged VSIX: agent-diagram-export-1.0.0.vsix.

Build locally:

npm install
npm run package

License

MIT © Can Uludag https://uludagcan.com