Excalidraw Diagram Generator

Trust Score 88/100

Generate hand-drawn Excalidraw-style diagrams (SVG/PNG) from text prompts with layout rules, element format, and a renderer script.

triggers:diagramexcalidrawflowchartarchitecture sketch/excalidrawhand-drawn diagram

GitHub SKILL.md

What it does

This skill generates Excalidraw-style, hand-drawn diagrams from textual descriptions. It parses user intent into components, relationships, layout direction and outputs diagram JSON that a renderer produces as SVG and PNG. The SKILL.md contains configuration for output directories, element format rules, rendering details, and example workflows.

When to use it

Use when a user asks for architecture sketches, flowcharts, system designs, deployment diagrams, or any hand-drawn visual. It is invoked for prompts requesting diagrams or via a user command like /excalidraw. Ideal for quickly producing visuals for documentation or design reviews.

What's included

Scripts: references to a renderer at scripts/render.mjs (requires Node.js).
References: an element-format reference file detailing JSON schema and style rules.
Instructions: step-by-step workflow from analyzing requests to rendering and reporting output paths; layout, spacing, sizing, and common mistakes are documented.

Compatible agents

Agents capable of invoking Node.js renderers or producing diagram JSON (local assistants, Code/Copilot-like agents, or any agent that can write files and run node).

Audit Summary

Excalidraw skill generates hand-drawn style SVG+PNG diagrams from JSON element definitions. The SKILL.md is thorough with clear 5-step workflow, usage examples, and a common mistakes section. The render.mjs script is well-written (~400 lines) with proper text layout, collision avoidance, and font embedding. Scripts couldn't be run because the auditor only supports .py/.sh/.js extensions, not .mjs. No security concerns — purely local rendering with no network calls or credential handling.

Watch Out

Requires npm install in scripts/ directory before use
Needs font files (Virgil.woff2, Cascadia.woff2) in fonts/ directory
references/element-format.md was not fetched — agents need to read it for the JSON format spec

Missing Dependencies

node_modules (roughjs, @xmldom/xmldom, @resvg/resvg-js) require npm install)

Notes

Clean, well-structured skill. The .mjs extension for the renderer means the audit runner couldn't execute it, but static analysis shows it's safe and well-written. The skill fills a useful niche for generating diagrams from text descriptions. Consider whether the auditor should support .mjs extension.

Information

Repository: excalidraw-skill
Stars: 22
Installs: 0

Trust Score

Overall88

Security98

Code Quality78

Architecture80

Usefulness72

Related Skills

Scientific Schematics & Diagrams

Generate publication-quality scientific diagrams via AI with iterative quality review and smart regeneration for journal, conference, poster, and presentation o

Plotly (Interactive Python Visualizations)

Interactive Python visualization skill for building hoverable, zoomable, and embeddable charts (Plotly Express + Graph Objects) for EDA, dashboards, and present

BK-CI Design Patterns Guide

Practical guide to design patterns used in the BK-CI project (Kotlin/Spring). Covers factory, strategy, singleton, decorator, observer, template method, chain-o

Manim Idea to Export

Turn plain-language concepts into production-ready ManimCE scene blueprints, runnable code, preview renders, and final export commands for video assets.

Node.js Best Practices

Guidelines and decision-making for Node.js architecture, runtime, async patterns, security, validation, and testing to inform framework and system choices.

PPT as Code

Creator-first workflow to plan and build HTML-first presentations with staged modes (quick/basic/advanced), optional PPTX export, and clear QA and image plannin

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.

draw.io Diagram Skill

Create, edit, lint, and export draw.io diagrams; includes export helpers, SVG linting, and repository QA for clean architecture and icon-based diagrams.

Back to Skills