New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Excalidraw Diagram Design

by BV-Venky in BV-Venky/excalidraw-architect-mcp

Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams.

MITAuto-check passedDevelopment

Install Excalidraw Diagram Design

skills CLI
$ npx skills add BV-Venky/excalidraw-architect-mcp --skill excalidraw-diagram-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install BV-Venky/excalidraw-architect-mcp excalidraw-diagram-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/BV-Venky/excalidraw-architect-mcp.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.skills/excalidraw-diagram-design .claude/skills/excalidraw-diagram-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
excalidraw-diagram-design
GitHub stars
158
Token cost
~1.6k tokens
SKILL.md length
620 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams.

  • Works in 5 steps: Keep it tree-like - avoid diamond… → Limit edges to primary data flow → Hub nodes should have 3–5 fan-out, not… → …
  • Generating architecture diagrams
  • SKILL.md covers Core Principle, Graph Topology Rules, Node Design and Edge Design, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Excalidraw Diagram Design is an agent skill from BV-Venky/excalidraw-architect-mcp. Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams. Use when generating architecture diagrams, flow diagrams, or any visual diagram via creatediagram or mermaidtoexcalidraw.

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Diagrams. It works with Excalidraw, Model Context Protocol and Mermaid. The repository describes itself as: Turn your architecture into a living, queryable knowledge graph - and render it as beautiful auto-laid-out Excalidraw diagrams. An MCP server for Cursor, Claude Code & Windsurf… The licence is MIT.

When your agent uses it

  • Generating architecture diagrams
  • Any visual diagram via creatediagram
  • Mermaidtoexcalidraw

Example prompts

  • “/excalidraw-diagram-design”

Workflow steps

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

  1. Keep it tree-like - avoid diamond dependencies
  2. Limit edges to primary data flow
  3. Hub nodes should have 3–5 fan-out, not more
  4. Keep layers balanced
  5. Use concise edge labels (≤4 words)

What it can do on your machine

Read from SKILL.md and the folder at commit 6280bb3. 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

    No URLs in SKILL.md.

    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 Diagram Design loads about 1.6k tokens when it runs. Until then it costs about 69 tokens; SKILL.md has 620 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~69
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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 BV-Venky/excalidraw-architect-mcp at commit 6280bb3, republished under its MIT licence (© BV-Venky). 620 words, ~1,603 tokens.

Download SKILL.mdSave it as .claude/skills/excalidraw-diagram-design/SKILL.md (or your agent's skills folder).
name
excalidraw-diagram-design
description
Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams. Use when generating architecture diagrams, flow diagrams, or any visual diagram via create_diagram or mermaid_to_excalidraw.

Excalidraw Diagram Design Guide

This skill teaches you how to structure the nodes and connections input for the Excalidraw Architect MCP so the auto-layout engine produces clean, readable diagrams - not spaghetti.

Core Principle

The layout engine (Sugiyama algorithm) works best with tree-like, flow-oriented graphs. Your job as the LLM is to model the data flow story, not the import graph.

Graph Topology Rules

1. Keep it tree-like - avoid diamond dependencies

The #1 cause of messy diagrams is multiple nodes connecting to the same shared target.

BAD: 4 arrows all pointing to "models.py"
  mermaid → models
  state   → models
  layout  → models
  builder → models

GOOD: Drop shared infrastructure nodes or show them as a single grouped leaf
  layout → builder → output

Rule: If a node has 4+ incoming edges, either remove it or group it with related nodes.

2. Limit edges to primary data flow

Show how data moves through the system, not every import statement.

BAD (16 edges for 12 nodes - dependency graph):
  server → mermaid, state, layout, excalidraw
  mermaid → models
  state → models, excalidraw_file
  layout → models, grandalf, components
  excalidraw → models, components, themes, excalidraw_file

GOOD (9 edges for 9 nodes - data flow):
  ide → server → [mermaid, state, layout]
  layout → renderer → [styling, output]

Rule: Aim for roughly N-1 to N+2 edges for N nodes (tree + a few extra).

3. Hub nodes should have 3–5 fan-out, not more

The layout engine auto-stretches "hub" nodes (≥3 connections) into gate-like rectangles. This looks great for API gateways, load balancers, and message brokers. But a node with 6+ fan-out creates too many parallel arrows.

GOOD: API Gateway → [Auth, Users, Orders, Payments]  (4 fan-out)
BAD:  Server → [A, B, C, D, E, F, G, H]             (8 fan-out)

Rule: If a node has 6+ connections, split it into two logical stages or group downstream nodes.

4. Keep layers balanced

Each "column" (layer) in a left-right diagram should have 1–4 nodes. If one layer has 6+ nodes, the diagram becomes vertically sprawling.

GOOD layer distribution: [1] → [1] → [3] → [2] → [1]
BAD layer distribution:  [1] → [1] → [7] → [1]
5. Use concise edge labels (≤4 words)

Edge labels affect spacing. Long labels force adaptive gaps to push layers apart. They also increase node height, which makes the obstacle-detection engine more likely to trigger unnecessary detours.

GOOD: "LayoutResult", "DiagramGraph", "write JSON"
BAD:  "sends the computed layout result with positioned nodes and edges"

Rule: Max 4 words per edge label. If you need more context, put it in the node label or drop it.

Node Design

Choose the right abstraction level
  • Too granular: Every function or class as a node → too many nodes
  • Too abstract: "Frontend" and "Backend" → no useful detail
  • Right level: One node per module, service, or logical component
Use component_type for auto-styling

The tool auto-detects technology from labels, but explicit component_type is more reliable:

json
{"id": "cache", "label": "Session Cache", "component_type": "redis"}
{"id": "db", "label": "Order Database", "component_type": "postgresql"}
{"id": "queue", "label": "Event Bus", "component_type": "kafka"}
{"id": "lb", "label": "API Gateway", "component_type": "api_gateway"}
Node count guidelines
Diagram typeIdeal node count
High-level architecture6–15
Detailed service flow10–25
Service deep-dive (internals, sub-components)15–30
Simple sequence5–9

For diagrams with 20+ nodes, keep labels to 1–2 lines max - long multi-line labels inflate node sizes and trigger unnecessary obstacle detours. Prefer short, scannable labels (e.g., DynamoDB: orders instead of DynamoDB OrdersTable\n(partition: order_id)).

Show full SKILL.md (233 more words)Show less

Edge Design

Direction matters

Default is LR (left-to-right). Use this for:

  • Architecture diagrams (request flows left to right)
  • Data pipelines

Use TD (top-down) for:

  • Org charts
  • Class hierarchies
  • Decision trees
Edge styles
  • solid (default): Primary data flow
  • dashed: Optional, async, or metadata paths
  • dotted: Monitoring, logging, observability
  • thick: Critical path or high-throughput

Common Diagram Patterns

Pattern 1: Gateway Fan-out (architecture)
Client → Gateway → [Service A, Service B, Service C]
Each service → Database or Cache (1:1)

Produces a clean hub with parallel arrows.

Pattern 2: Pipeline (data flow)
Input → Step 1 → Step 2 → Step 3 → Output

Linear chain, optionally with one fork-merge.

Pattern 3: Pipeline with fork-merge
Input → Process → [Branch A, Branch B] → Merge → Output

Creates a diamond shape - keep it to ONE fork-merge per diagram.

Pattern 4: Layered architecture
Client → Load Balancer → [Services] → [Databases]
                                     → [Caches]
Monitoring → [Prometheus, Grafana]  (disconnected - auto-stacked)

Anti-Patterns

Anti-patternProblemFix
Every import as an edgeSpaghetti arrowsShow primary data flow only
Shared dependency node (4+ incoming)Arrow crossings, overlapsRemove or group the node
Long edge labelsExcessive spacing, detour triggersKeep to ≤4 words
30+ nodes without splittingUnreadable, routing congestionSplit into multiple diagrams
Multi-line verbose labels at 20+ nodesInflated nodes, false detoursUse 1–2 line labels
Multiple fork-mergesComplex crossing patternsLinearize or split

Quick Checklist

Before calling create_diagram:

  • ≤15 nodes for architecture, ≤25 for detailed flows, ≤30 for deep-dives
  • Edge count ≈ node count (tree-like, not a mesh)
  • No node has 5+ incoming edges
  • Hub fan-out is 3–5, not 6+
  • Edge labels are ≤4 words each
  • For 20+ nodes: labels are 1–2 lines max
  • Used component_type for known technologies
  • One primary flow direction, not a web

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

Files

Just SKILL.md in .skills/excalidraw-diagram-design of BV-Venky/excalidraw-architect-mcp.

Open the folder on GitHubat commit 6280bb3

Compare with similar skills

Excalidraw Diagram Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Excalidraw Diagram Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Excalidraw Diagram Design this skillBV-Venky/excalidraw-architect-mcp158—~1.6kAutomated safety check: PassMIT
Excalidraw Skillyctimlin/mcp_excalidraw2.5k—~4.6kAutomated safety check: PassMIT
Excalidraw Canvas Toolkitlingzhi227/agent-research-skills390—~3.8kAutomated safety check: PassNone
Diagram Designcathrynlavery/diagram-design49k1 repos~7.6kAutomated safety check: PassMIT
GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram18k—~427Automated safety check: PassMIT
Drawiobahayonghang/drawio-skills287—~4.1kAutomated safety check: NotesMIT

Similar skills

  • Excalidraw Skill

    yctimlin/mcp_excalidraw

    Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.

    2.5k GitHub stars~4.6k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Excalidraw Canvas Toolkit

    lingzhi227/agent-research-skills

    Draws and refines Excalidraw diagrams on a live canvas through MCP tools or a REST API, with screenshots, file import and export, snapshots and Mermaid conversion.

    390 GitHub stars~3.8k tokensUpdated 7 mo ago
    DevelopmentAuto-check passed

  • Diagram Design

    cathrynlavery/diagram-design

    Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.

    49k GitHub starsUsed in 1 repo~7.6k tokens
    DevelopmentAuto-check passed

  • GitDiagram Repository Overview

    ahmedkhaleel2004/gitdiagram

    Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.

    18k GitHub stars~427 tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Drawio

    bahayonghang/drawio-skills

    Create, edit, replicate, import, and export draw.io diagrams with an offline YAML-first workflow: architecture, network topologies, flowcharts, UML/ER, org charts, Mermaid/CSV conversion, existing…

    287 GitHub stars~4.1k tokensUpdated 1 mo ago
    DevelopmentAuto-check: notes

  • Mermaid Diagrams

    veelenga/claude-mermaid

    Creating and refining Mermaid diagrams with live reload. An agent skill from veelenga/claude-mermaid.

    216 GitHub stars~1.3k tokensUpdated 4 days ago
    DevelopmentAuto-check passed

More from BV-Venky/excalidraw-architect-mcp

  • Excalidraw Architect

    BV-Venky/excalidraw-architect-mcp

    Choose and compose the right Excalidraw diagram - architecture, flowchart, sequence, state, ER, swimlane, process, timeline, quadrant, pyramid, venn, loop, gantt, bar, line, scatter, and more -…

    158 GitHub stars~2k tokensUpdated 1 mo ago
    Auto-check passed

  • Architecture Knowledge Graph

    BV-Venky/excalidraw-architect-mcp

    Guide for reading a codebase and building a high-quality, persistent architecture knowledge graph via the Excalidraw Architect MCP kg tools.

    158 GitHub stars~1.1k tokensUpdated 1 mo ago
    Auto-check passed

Works with

Categories

Questions about Excalidraw Diagram Design

What does Excalidraw Diagram Design do?

Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams. Excalidraw Diagram Design is an agent skill from BV-Venky/excalidraw-architect-mcp. Guide for structuring graph input (nodes and edges) for the Excalidraw Architect MCP tool to produce clean, readable diagrams.

When should I use Excalidraw Diagram Design?

Excalidraw Diagram Design fits situations like: generating architecture diagrams; any visual diagram via creatediagram; mermaidtoexcalidraw.

How do I install Excalidraw Diagram Design in Claude Code?

Run `npx skills add BV-Venky/excalidraw-architect-mcp --skill excalidraw-diagram-design -a claude-code`. Or copy the skill folder (.skills/excalidraw-diagram-design in BV-Venky/excalidraw-architect-mcp) into .claude/skills/excalidraw-diagram-design in your project. Claude Code loads it when a task matches its description.

How do I install Excalidraw Diagram Design in Codex?

Run `npx skills add BV-Venky/excalidraw-architect-mcp --skill excalidraw-diagram-design -a codex`. Or copy the skill folder (.skills/excalidraw-diagram-design in BV-Venky/excalidraw-architect-mcp) into .agents/skills/excalidraw-diagram-design in your project. Codex loads it when a task matches its description.

Can I use Excalidraw Diagram Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add BV-Venky/excalidraw-architect-mcp --skill excalidraw-diagram-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/excalidraw-diagram-design, .gemini/skills/excalidraw-diagram-design, .github/skills/excalidraw-diagram-design and .opencode/skills/excalidraw-diagram-design in your project.

What does Excalidraw Diagram Design need to run?

SKILL.md names no scripts, command-line tools or credentials: Excalidraw Diagram Design is instructions for the agent only.

Does Excalidraw Diagram Design access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Excalidraw Diagram Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Excalidraw Diagram Design use?

Excalidraw Diagram Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Excalidraw Diagram Design use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Excalidraw Diagram Design?

Skills that share tags, products or a category with Excalidraw Diagram Design: Excalidraw Skill (yctimlin/mcp_excalidraw, 2.5k stars), Excalidraw Canvas Toolkit (lingzhi227/agent-research-skills, 390 stars), Diagram Design (cathrynlavery/diagram-design, 49k stars) and GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Excalidraw Diagram Design?

BV-Venky (a GitHub user) maintains it in BV-Venky/excalidraw-architect-mcp, which has 158 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on August 25, 2026.

Source: BV-Venky/excalidraw-architect-mcp on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.