Vibe Index
🎯

excalidraw

🎯Skill

from johnlarkin1/claude-code-extensions

VibeIndex|
What it does

Generates hand-drawn style diagrams in Excalidraw format, supporting flowcharts, architecture, sequence diagrams, mind maps, and wireframes with precise JSON layout.

πŸ“¦

Part of

johnlarkin1/claude-code-extensions(4 items)

excalidraw

Installation

Add MarketplaceAdd marketplace to Claude Code
/plugin marketplace add johnlarkin1/claude-code-extensions
Install PluginInstall plugin from marketplace
/plugin install diagram-code@larkin-plugins
Install PluginInstall plugin from marketplace
/plugin install tauri-dev@larkin-plugins
Install PluginInstall plugin from marketplace
/plugin install excalidraw-diagrams@diagram-market
Install PluginInstall plugin from marketplace
/plugin install manim-animations@animation-lab

+ 2 more commands

πŸ“– Extracted from docs: johnlarkin1/claude-code-extensions
Need more details? View full documentation on GitHub β†’
5Installs
-
AddedFeb 4, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Generate Excalidraw diagrams (.excalidraw JSON files) for whiteboarding, flowcharts, architecture diagrams, sequence diagrams, mind maps, wireframes, and org charts. Use when user requests diagrams, visual documentation, system architecture visualization, process flows, or any hand-drawn style diagram. Triggers on requests mentioning Excalidraw, diagram creation, flowcharts, architecture diagrams, sequence diagrams, wireframes, or visual documentation.

Overview

# Excalidraw Diagram Generation

Generate .excalidraw JSON files that open directly in Excalidraw.

Quick Start

Minimal valid file:

```json

{

"type": "excalidraw",

"version": 2,

"source": "https://excalidraw.com",

"elements": [],

"appState": { "viewBackgroundColor": "#ffffff" },

"files": {}

}

```

Workflow

  1. Identify diagram type (flowchart, architecture, sequence, mind map, wireframe, org chart)
  2. Plan element layout with consistent spacing (use 20px grid)
  3. Generate elements with unique IDs and proper bindings
  4. Write complete JSON to .excalidraw file

Element Patterns

Shape with Label

Always bind text to container bidirectionally:

```json

// Rectangle

{

"type": "rectangle",

"id": "box_1",

"x": 100, "y": 100, "width": 150, "height": 60,

"backgroundColor": "#a5d8ff",

"boundElements": [{ "id": "text_1", "type": "text" }],

...baseProps

}

// Bound text

{

"type": "text",

"id": "text_1",

"containerId": "box_1",

"textAlign": "center",

"verticalAlign": "middle",

...textProps

}

```

Connected Arrow

Update both arrow and shapes:

```json

// Arrow

{

"type": "arrow",

"id": "arrow_1",

"points": [[0, 0], [150, 0]],

"startBinding": { "elementId": "box_1", "fixedPoint": [1.0, 0.5001], "mode": "orbit" },

"endBinding": { "elementId": "box_2", "fixedPoint": [0.0, 0.5001], "mode": "orbit" },

"endArrowhead": "arrow",

...baseProps

}

// Both shapes need boundElements updated

"boundElements": [{ "id": "arrow_1", "type": "arrow" }]

```

Diagram-Specific Patterns

Flowchart: Ellipse (start/end), Rectangle (process), Diamond (decision), vertical flow with 70px gaps

Sequence Diagram: Rectangles (actors) at top, dashed vertical lines (lifelines), horizontal arrows (messages)

Architecture: Rectangles with rounded corners, group related components, use frames for boundaries

Mind Map: Central ellipse, radiating lines to topic rectangles, organic layout

Org Chart: Rectangles with hierarchy, lines (not arrows) for connections

Critical Rules

  1. Bidirectional bindings - When arrow connects to shape, update BOTH:

- Arrow's startBinding/endBinding

- Shape's boundElements array

  1. fixedPoint precision - Use 0.5001 not 0.5 to avoid floating point issues
  1. Unique IDs - Every element needs unique id
  1. Calculate width/height for lines/arrows from points array
  1. Required base properties for every element:

```

id, type, x, y, width, height, angle, strokeColor, backgroundColor,

fillStyle, strokeWidth, strokeStyle, roughness, opacity, roundness,

seed, version, versionNonce, isDeleted, updated, groupIds, frameId,

boundElements, link, locked, index

```

Common Values

Colors:

  • Stroke: #1e1e1e (black), #e03131 (red), #2f9e44 (green), #1971c2 (blue)
  • Background: #a5d8ff (blue), #b2f2bb (green), #ffec99 (yellow), #ffc9c9 (red), #d0bfff (purple)

Defaults:

  • strokeWidth: 2
  • roughness: 1 (hand-drawn), 0 (smooth for text)
  • opacity: 100
  • fontFamily: 5 (Excalifont)
  • fontSize: 20
  • seed: any random integer
  • version: 1, versionNonce: 0
  • index: "a0", "a1", "a2"...

Reference

See [references/format-spec.md](references/format-spec.md) for complete element schemas, all property values, and detailed examples.

More from this repository3

🎯
textual🎯Skill

textual skill from johnlarkin1/claude-code-extensions

🎯
tauri🎯Skill

Generates Tauri application boilerplate and provides code snippets for creating cross-platform desktop apps with Rust and web technologies.

🎯
manim🎯Skill

Renders mathematical animations and visualizations using Manim, a Python library for creating precise, programmatic math graphics.