skills.rest
y0ncha
y0nchaCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw-diagrams

Generate editable Excalidraw diagram files with programmatic layout and styling.

1|Updated Mar 7, 2026
Search Tags:#excalidraw#flowchart#visualization#export#diagram#google-drive#architecture-diagram
One-click install
npx skills add https://github.com/y0ncha/aptitude-client --skill excalidraw-diagrams-y0ncha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-diagrams
Source: https://github.com/y0ncha/aptitude-client/tree/main/.agents/skills/excalidraw-diagrams
Command: npx skills add https://github.com/y0ncha/aptitude-client --skill excalidraw-diagrams-y0ncha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill removes the manual effort of drawing diagrams by programmatically producing professional, editable Excalidraw (.excalidraw) files for flowcharts, architecture diagrams, system designs, and other visual documentation.

Core Features & Use Cases

  • Programmatic Diagram Creation: Create labeled shapes, text boxes, arrows, and connections via Diagram, Flowchart, AutoLayoutFlowchart, and ArchitectureDiagram classes.
  • Styling and Layout Control: Configure global appearance, box sizing, color schemes, flowchart and architecture styles, and auto-layout behavior for consistent, presentation-ready visuals.
  • Export & Collaboration: Export to PNG using Playwright, save and share files via Google Drive, and enable a round-trip workflow where humans edit diagrams and programmatic updates are reapplied.
  • Use Case: Automatically generate architecture diagrams for documentation, export high-quality PNGs for embedding in Google Docs, or batch-create flowcharts from process definitions.

Quick Start

Create a flowchart named pipeline.excalidraw with Input → Process → Output using the excalidraw-diagrams generator.

Frequently Asked Questions about excalidraw-diagrams

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

FAQPage Schema
How do I generate Excalidraw diagrams programmatically for documentation?▼

You can generate Excalidraw diagrams programmatically by producing JSON-formatted .excalidraw files. This approach applies labeled shapes, arrows, and auto-layout styling to create editable flowcharts and architecture diagrams for visual documentation.

Can I export Excalidraw architecture diagrams to PNG using Playwright?▼

Yes, you can export Excalidraw architecture diagrams to PNG using Playwright. The skill supports a Playwright-based export workflow to render high-quality PNG images suitable for embedding in presentations and Google Docs.

What is the best way to automate flowchart creation from process definitions?▼

Automating flowchart creation involves using programmatic classes like AutoLayoutFlowchart to map process definitions into JSON-formatted .excalidraw files. This enables batch-creating consistent, editable visual diagrams without manual drawing effort.

Does the generated Excalidraw file support a round-trip workflow with manual edits?▼

Yes, generated Excalidraw files support a round-trip workflow. Humans can manually edit the visual diagrams, and programmatic updates can be reapplied later, enabling seamless collaboration between automated generation and manual adjustments.

Can I upload generated Excalidraw files directly to Google Drive?▼

Yes, you can upload generated Excalidraw files directly to Google Drive. The skill includes an optional workflow to save and share the JSON-formatted diagram files, facilitating collaboration and document embedding.

What are the limitations of auto-layout for architecture diagrams?▼

Auto-layout for architecture diagrams relies on programmatic box sizing and styling configurations. Complex custom routing or highly irregular spatial relationships may require manual adjustment after generating the initial JSON-formatted Excalidraw file.

Related Skills

Explore More Design & Creative Skills→
ahostbrahostbr
12

excalidraw-diagrams

Generate Excalidraw diagrams from Python code as .excalidraw JSON files.

Community
Intermediate
windyskywindysky

moai-library-mermaid

Render Mermaid diagrams to SVG and PNG via MCP Playwright.

Community
Advanced
cellarwoodcellarwood

gws-workflow-file-announce

Post Drive file updates to Google Chat spaces via the gws CLI.

Official
Basic
kettleofketchupkettleofketchup
13

mermaidjs-v11

Generate Mermaid.js v11 diagrams from text definitions.

Community
Intermediate