Excalidraw Architecture Diagrams

What it does

When your agent uses it

• Generating an architecture diagram for a codebase
• Visualizing services, databases and data flows as an editable Excalidraw file
• Exporting an existing .excalidraw file to PNG or SVG

Example prompts

• “Generate an architecture diagram for this project.”
• “Create an excalidraw diagram of the system and export it as a PNG.”
• “Convert docs/system.excalidraw to SVG.”

Requirements

• Playwright for PNG or SVG export

Workflow steps

11 steps, taken from the step headings in SKILL.md.

1. 1NEVER Use Diamond Shapes
2. 2Labels Require TWO Elements
3. 3Elbow Arrows Need Three Properties
4. 4Arrow Edge Calculations
5. 5Analyze Codebase
6. 6Plan Layout
7. 7Generate Elements
8. 8Add Connections
9. 9Add Grouping (Optional)
10. 10Validate and Write
11. 11Export to PNG/SVG (Optional)

What it can do on your machine

Read from SKILL.md and the folder at commit c0fd926. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are json).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • excalidraw.com

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Excalidraw Architecture Diagrams loads about 2k tokens when it runs, and up to ~10k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 680 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~84

When it runs · the whole SKILL.md, loaded when a task matches

~2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~10k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from ooiyeefei/ccc at commit c0fd926, republished under its MIT licence (© ooiyeefei). 680 words, ~1,956 tokens.

name

excalidraw

description

Generate architecture diagrams as .excalidraw files from codebase analysis, with optional PNG/SVG export. Use when the user asks to create architecture diagrams, system diagrams, visualize codebase structure, generate excalidraw files, export excalidraw diagrams to PNG or SVG, or convert .excalidraw files to image formats.

"Generate an architecture diagram for this project"
"Create an excalidraw diagram of the system"
"Visualize this codebase as an excalidraw file"

// 1. Shape with boundElements reference
{
  "id": "my-box",
  "type": "rectangle",
  "boundElements": [{ "type": "text", "id": "my-box-text" }]
}

// 2. Separate text element with containerId
{
  "id": "my-box-text",
  "type": "text",
  "containerId": "my-box",
  "text": "My Label"
}

{
  "type": "arrow",
  "roughness": 0,        // Clean lines
  "roundness": null,     // Sharp corners
  "elbowed": true        // 90-degree mode
}

Row 1: Users/Entry points (y: 100)
Row 2: Frontend/Gateway (y: 230)
Row 3: Orchestration (y: 380)
Row 4: Services (y: 530)
Row 5: Data layer (y: 680)

Columns: x = 100, 300, 500, 700, 900
Element size: 160-200px x 80-90px

{ "points": [[0, 0], [0, 110]], "x": 590, "y": 290 }

{ "points": [[0, 0], [-325, 0], [-325, 125]], "x": 525, "y": 420 }

{ "points": [[0, 0], [50, 0], [50, -125], [20, -125]], "x": 710, "y": 440 }

points [[0,0], [-440,0], [-440,70]] → width=440, height=70

5 arrows: 20%, 35%, 50%, 65%, 80% across edge width

© ooiyeefei, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 7 other files (references) in skills/excalidraw of ooiyeefei/ccc.

• SKILL.md
• README.md
• references/arrows.md
• references/colors.md
• references/examples.md
• references/export.md
• references/json-format.md
• references/validation.md

Open the folder on GitHubat commit c0fd926