skills.rest
cilerler
cilerlerCOMMUNITY
Explore all skills by this author →
Website𝕏@cilerlerGitHub

excalidraw-diagram-generator

Generate Excalidraw diagram JSON files and render them to PNG via Playwright.

2|1|Updated Feb 12, 2026
Search Tags:#architecture#json#excalidraw#visualization#playwright#diagram#png rendering
One-click install
npx skills add https://github.com/cilerler/lillian --skill excalidraw-diagram-generator-cilerler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-diagram-generator
Source: https://github.com/cilerler/lillian/tree/main/plugins/ai-toolkit/skills/excalidraw-diagram-generator
Command: npx skills add https://github.com/cilerler/lillian --skill excalidraw-diagram-generator-cilerler

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Microsoft.Playwright, and includes references (resource) components.

What problem does it solve? Creating clear, professional architecture and workflow diagrams by hand is slow, and AI-generated diagrams often end up as generic labeled boxes that fail to communicate real structure. This Skill produces Excalidraw JSON files built on a visual-argument methodology, then renders them to PNG so the result can be inspected and iteratively fixed. ## Core Features & Use Cases - Structured Diagram Generation: Produces .excalidraw JSON using a semantic color palette, element templates, and visual patterns (fan-out, convergence, timeline, tree) so shapes mirror the concepts they represent. - Automatic PNG Rendering: Bundles a Playwright-based C# renderer (render_excalidraw.cs) that converts Excalidraw JSON to PNG through headless Chromium for visual validation. - Mandatory Render-View-Fix Loop: Enforces an iterative validation workflow where the rendered PNG is audited for clipping, overlaps, and composition balance before delivery. - Use Case: Ask for a diagram of how a distributed lock works, and receive a rendered, validated Excalidraw diagram with real component names, evidence artifacts like code snippets, and a balanced multi-section layout. ## Quick Start Ask the agent to create an Excalidraw diagram showing how your system's workflow or architecture works, and it will generate the JSON, render it to PNG, and refine it.

Frequently Asked Questions about excalidraw-diagram-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an Excalidraw diagram with an AI agent?▼

Describe the workflow, architecture, or concept you want visualized, and the agent generates the Excalidraw JSON following a design methodology with semantic colors and visual patterns. It then renders the result to PNG and iterates until the diagram passes visual checks.

How do I render an Excalidraw JSON file to PNG?▼

Run dotnet run render_excalidraw.cs -- <path-to-file.excalidraw> from the skill's references directory. The script uses Playwright with headless Chromium to export a PNG next to the input file, with optional --output, --scale, and --width flags.

What setup is required before rendering Excalidraw diagrams?▼

A one-time browser install is required: run dotnet run render_excalidraw.cs -- install-browsers from the references directory. This installs the Chromium browser that Playwright needs for headless rendering.

Can I customize the colors and brand style of generated diagrams?▼

Yes, all colors live in references/color-palette.md as the single source of truth. Edit that file to change shape fills, strokes, text hierarchy colors, and evidence artifact colors without touching the rest of the skill.

Why does the Excalidraw renderer fail with a Chromium error?▼

The error occurs when Playwright's Chromium executable is not installed. Run the install-browsers command once from the references directory, then retry rendering your .excalidraw file.

What are the limitations of generating large Excalidraw diagrams?▼

Large diagrams must be built section by section rather than in one pass, because a single response can hit output limits and produce truncated JSON. The skill enforces namespaced seeds, descriptive IDs, and cross-section binding updates to keep multi-section files valid.

Related Skills

Explore More Design & Creative Skills→
levnikolaevichlevnikolaevich
556

ln-75-architecture-diagram-builder

Creates evidence-backed current or target architecture diagrams from repository evidence.

Community
Intermediate
navraj007innavraj007in
2

export-diagrams

Extract Mermaid blocks from architecture blueprints and render them as PNG images.

Community
Intermediate
CuriousLearnerCuriousLearner
27

architecture-documenter

Document system architecture and technical decisions with diagrams and ADRs.

Community
Advanced
mahg-esmahg-es
3

architecture-diagram

Generate C4 model Mermaid or PlantUML diagrams from system components and audience.

Official
Intermediate