Excalidraw Diagrams with Hermes Agent: JSON Format & Workflow

This skill lets you generate hand-drawn style diagrams as .excalidraw files by writing standard Excalidraw element JSON. You can drag-and-drop these files onto excalidraw.com for viewing and editing. No accounts, no API keys, no rendering libraries are needed. Just JSON.

What it does

You write an array of Excalidraw element objects, wrap them in the standard envelope, and save the file. The result is a portable diagram that can be opened in the Excalidraw editor, shared via a link, or embedded in documentation. The hand-drawn aesthetic comes from the roughness default, so your diagrams look like whiteboard sketches rather than rigid vector art.

This is useful when you need architecture diagrams, flowcharts, sequence diagrams, or concept maps that are easy to version control and regenerate. Because the output is plain JSON, you can generate diagrams programmatically from your code or data.

Before you start

This skill is bundled with Hermes Agent and installed by default. You do not need to install anything extra to create .excalidraw files. The only prerequisite is that you can write JSON and use the write_file tool.

If you want to upload a diagram for a shareable link, you need the cryptography Python package. Install it with:

pip install cryptography

The upload script is located at skills/creative/excalidraw/scripts/upload.py and is run via the terminal tool.

Workflow

Load this skill (it is already loaded if you are using the default Hermes Agent setup).
Write the elements JSON as an array of Excalidraw element objects.
Save the file using write_file to create a .excalidraw file.
Optionally upload for a shareable link using scripts/upload.py via terminal.

Saving a Diagram

Wrap your elements array in the standard .excalidraw envelope and save with write_file:

{
  "type": "excalidraw",
  "version": 2,
  "source": "hermes-agent",
  "elements": [ ...your elements array here... ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

Save to any path, e.g. ~/diagrams/my_diagram.excalidraw.

Uploading for a Shareable Link

Run the upload script (located in this skill's scripts/ directory) via terminal:

python skills/creative/excalidraw/scripts/upload.py ~/diagrams/my_diagram.excalidraw

This uploads to excalidraw.com (no account needed) and prints a shareable URL. Requires the cryptography pip package (pip install cryptography).

Element Format Reference

Required Fields (all elements)

type, id (unique string), x, y, width, height

Defaults (skip these -- they're applied automatically)

strokeColor: "#1e1e1e"
backgroundColor: "transparent"
fillStyle: "solid"
strokeWidth: 2
roughness: 1 (hand-drawn look)
opacity: 100

Canvas background is white.

Element Types

Rectangle:

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 100 }

roundness: { "type": 3 } for rounded corners
backgroundColor: "#a5d8ff", fillStyle: "solid" for filled

Ellipse:

{ "type": "ellipse", "id": "e1", "x": 100, "y": 100, "width": 150, "height": 150 }

Diamond:

{ "type": "diamond", "id": "d1", "x": 100, "y": 100, "width": 150, "height": 150 }

Labeled shape (container binding) -- create a text element bound to the shape:

WARNING: Do NOT use "label": { "text": "..." } on shapes. This is NOT a valid Excalidraw property and will be silently ignored, producing blank shapes. You MUST use the container binding approach below.

The shape needs boundElements listing the text, and the text needs containerId pointing back:

{ "type": "rectangle", "id": "r1", "x": 100, "y": 100, "width": 200, "height": 80,
  "roundness": { "type": 3 }, "backgroundColor": "#a5d8ff", "fillStyle": "solid",
  "boundElements": [{ "id": "t_r1", "type": "text" }] },
{ "type": "text", "id": "t_r1", "x": 105, "y": 110, "width": 190, "height": 25,
  "text": "Hello", "fontSize": 20, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "r1", "originalText": "Hello", "autoResize": true }

Works on rectangle, ellipse, diamond
Text is auto-centered by Excalidraw when containerId is set
The text x/y/width/height are approximate -- Excalidraw recalculates them on load
originalText should match text
Always include fontFamily: 1 (Virgil/hand-drawn font)

Labeled arrow -- same container binding approach:

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow",
  "boundElements": [{ "id": "t_a1", "type": "text" }] },
{ "type": "text", "id": "t_a1", "x": 370, "y": 130, "width": 60, "height": 20,
  "text": "connects", "fontSize": 16, "fontFamily": 1, "strokeColor": "#1e1e1e",
  "textAlign": "center", "verticalAlign": "middle",
  "containerId": "a1", "originalText": "connects", "autoResize": true }

Standalone text (titles and annotations only -- no container):

{ "type": "text", "id": "t1", "x": 150, "y": 138, "text": "Hello", "fontSize": 20,
  "fontFamily": 1, "strokeColor": "#1e1e1e", "originalText": "Hello", "autoResize": true }

x is the LEFT edge. To center at position cx: x = cx - (text.length * fontSize * 0.5) / 2
Do NOT rely on textAlign or width for positioning

Arrow:

{ "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 200, "height": 0,
  "points": [[0,0],[200,0]], "endArrowhead": "arrow" }

points: [dx, dy] offsets from element x, y
endArrowhead: null | "arrow" | "bar" | "dot" | "triangle"
strokeStyle: "solid" (default) | "dashed" | "dotted"

Arrow Bindings (connect arrows to shapes)

{
  "type": "arrow", "id": "a1", "x": 300, "y": 150, "width": 150, "height": 0,
  "points": [[0,0],[150,0]], "endArrowhead": "arrow",
  "startBinding": { "elementId": "r1", "fixedPoint": [1, 0.5] },
  "endBinding": { "elementId": "r2", "fixedPoint": [0, 0.5] }
}

fixedPoint coordinates: top=[0.5,0], bottom=[0.5,1], left=[0,0.5], right=[1,0.5]

Drawing Order (z-order)

Array order = z-order (first = back, last = front)
Emit progressively: background zones → shape → its bound text → its arrows → next shape
BAD: all rectangles, then all texts, then all arrows
GOOD: bg_zone → shape1 → text_for_shape1 → arrow1 → arrow_label_text → shape2 → text_for_shape2 → ...
Always place the bound text element immediately after its container shape

Sizing Guidelines

Font sizes:

Minimum fontSize: 16 for body text, labels, descriptions
Minimum fontSize: 20 for titles and headings
Minimum fontSize: 14 for secondary annotations only (sparingly)
NEVER use fontSize below 14

Element sizes:

Minimum shape size: 120x60 for labeled rectangles/ellipses
Leave 20-30px gaps between elements minimum
Prefer fewer, larger elements over many tiny ones

Color Palette

See references/colors.md for full color tables. Quick reference:

Use	Fill Color	Hex
Primary / Input	Light Blue	`#a5d8ff`
Success / Output	Light Green	`#b2f2bb`
Warning / External	Light Orange	`#ffd8a8`
Processing / Special	Light Purple	`#d0bfff`
Error / Critical	Light Red	`#ffc9c9`
Notes / Decisions	Light Yellow	`#fff3bf`
Storage / Data	Light Teal	`#c3fae8`

Tips

Use the color palette consistently across the diagram
Text contrast is CRITICAL -- never use light gray on white backgrounds. Minimum text color on white: #757575
Do NOT use emoji in text -- they don't render in Excalidraw's font
For dark mode diagrams, see references/dark-mode.md
For larger examples, see references/examples.md

When not to use it

If you need pixel-perfect, non-hand-drawn diagrams, or if you require real-time collaboration, Excalidraw may not be the best choice. This skill is for generating static diagrams that look like hand-drawn sketches. For complex, data-driven diagrams that need to be updated frequently, consider whether the JSON generation overhead is worth it versus a dedicated diagramming tool.

Limits and gotchas

The label property on shapes is silently ignored. Always use the container binding approach with boundElements and containerId.
Emoji do not render in Excalidraw's font. Avoid them.
Text positioning for standalone text is approximate. The formula x = cx - (text.length * fontSize * 0.5) / 2 helps, but you may need to adjust.
The upload script requires the cryptography package. Install it before running.
The upload is to excalidraw.com, which is a third-party service. No account is needed, but the link is public.

Related resources

references/colors.md for the full color palette
references/dark-mode.md for dark mode diagrams
references/examples.md for larger example diagrams

Creating Excalidraw Diagrams with Hermes Agent: JSON Format & Workflow