skills.rest
semaes111
semaes111COMMUNITY
Explore all skills by this author →
GitHub

excalidraw-diagram

Generate Excalidraw-compatible JSON diagrams with multi-zoom views and PNG exports.

Updated Apr 7, 2026
Search Tags:#excalidraw#visualization#diagram#color-palette#render#evidence-artifacts#excalidraw-json
One-click install
npx skills add https://github.com/semaes111/PROYECTO-SKILLS --skill excalidraw-diagram-semaes111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-diagram
Source: https://github.com/semaes111/PROYECTO-SKILLS/tree/main/09-SKILLS-UTILIDADES/excalidraw-diagramas
Command: npx skills add https://github.com/semaes111/PROYECTO-SKILLS --skill excalidraw-diagram-semaes111

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill converts textual plans and system descriptions into Excalidraw .excalidraw JSON that communicates structure, causality, and intent visually, removing the guesswork and manual effort of producing multi-zoom, evidence-backed diagrams.

Core Features & Use Cases

  • Visual Arguments: Designs diagrams that argue a point—structure, flow, and relationships are conveyed by shape and layout, not just labels.
  • Brand Consistency: Reads a single source of truth for colors and styles from references/color-palette.md so all diagrams match brand guidelines.
  • Evidence & Multi-Zoom: Supports evidence artifacts (code snippets, JSON examples), summary + sectioned detail views, and a three-level zoom mindset for educational or technical diagrams.
  • Render Pipeline: Includes a render script and template to export PNGs and prescribes a render-and-validate loop to iterate until the visual result is correct.
  • Use Case: Produce a technical architecture diagram that shows a summary flow, section boundaries, and concrete JSON payload examples for developer documentation or tutorials.

Quick Start

Create an Excalidraw JSON that summarizes a microservice architecture with a top-level summary, sectioned details, and one evidence artifact showing a real JSON payload.

Frequently Asked Questions about excalidraw-diagram

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

FAQPage Schema
How do I generate Excalidraw JSON diagrams from text descriptions?▼

To generate Excalidraw JSON diagrams, provide your textual plan or system description. The Skill uses a design-first, section-by-section JSON construction approach to translate your input into structured Excalidraw-compatible JSON that visually communicates architecture and causality.

Can I maintain brand color consistency across multiple Excalidraw diagrams?▼

Yes, you can maintain brand color consistency. The Skill reads a single source of truth for colors and styles from a centralized color-palette reference file, ensuring all generated Excalidraw diagrams automatically match your specific brand guidelines.

How do I add code snippets and JSON examples as evidence artifacts to a diagram?▼

You add evidence artifacts like code snippets and JSON examples by specifying them in your text input. The Skill supports multi-zoom views and integrates these concrete payload examples directly into the Excalidraw JSON for technical documentation and tutorials.

What is the best way to export production-quality PNGs from Excalidraw JSON?▼

The best way to export production-quality PNGs is using the Skill's built-in render pipeline. It prescribes a render-and-validate loop with a specific render script and template, allowing you to iterate until the visual output accurately matches your intended design.

Does this approach support multi-zoom views for technical architecture diagrams?▼

Yes, this approach supports multi-zoom views for technical architecture diagrams. It applies a three-level zoom mindset, allowing you to create summary flows, section boundaries, and detailed sectioned views within a single Excalidraw JSON output.

Related Skills

Explore More Design & Creative Skills→
chloebrettchloebrett
3

diagrams

Generate system architecture, process flow, and data relationship diagrams from textual descriptions.

Community
Intermediate
jg-chalk-iojg-chalk-io

moai-mermaid-diagram-expert

Render Mermaid diagrams into SVG and PNG images via CLI.

Community
Advanced
danielscholldanielscholl
23

brand-voice-generator

Generate brand.json, config.json, brand-system.md, and tone-of-voice.md files.

Community
Advanced
ashiqcodeleafashiqcodeleaf

excalidraw

Create and manipulate hand-drawn diagrams using Excalidraw JSON format.

Community
Basic