excalidraw-diagram

Excalidraw Diagram Creator

Generate .excalidraw JSON files that argue visually, not just display information.

Locating Plugin Files

This skill's reference files and rendering tools are in the references/ directory at the plugin root. To find them:

Glob: **/excalidraw-diagram/references/color-palette.md

Read the first match's parent directory to locate all reference files:

• color-palette.md -- Single source of truth for colors and brand styles
• element-templates.md -- JSON templates for each Excalidraw element type
• json-schema.md -- Element types, common properties, binding format
• render_excalidraw.py -- Python/Playwright renderer (.excalidraw -> PNG)
• share_excalidraw.py -- Upload to excalidraw.com, returns shareable URL (E2E encrypted)
• render_template.html -- HTML template used by the renderer
• pyproject.toml -- Python dependencies (playwright, cryptography)

Read color-palette.md before generating any diagram. It is the single source of truth for all color choices -- shape fills, strokes, text colors, evidence artifact backgrounds, everything.

Customization

To make this skill produce diagrams in your own brand style, edit color-palette.md. Everything else in this file is universal design methodology and Excalidraw best practices.

---

Core Philosophy

Diagrams should ARGUE, not DISPLAY.

A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.

The Isomorphism Test: If you removed all text, would the structure alone communicate the concept? If not, redesign.

The Education Test: Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches -- it shows actual formats, real event names, concrete examples.

---

Depth Assessment (Do This First)

Before designing, determine what level of detail this diagram needs:

Simple/Conceptual Diagrams

Use abstract shapes when:

• Explaining a mental model or philosophy
• The audience doesn't need technical specifics
• The concept IS the abstraction (e.g., "separation of concerns")