skills.rest
Chris-Maskey
Chris-MaskeyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

excalidraw-diagram

Generate Excalidraw JSON diagrams with multi-zoom sections and evidence artifacts.

Updated Apr 17, 2026
Search Tags:#design#architecture#excalidraw#visualization#diagram#render#evidence-artifacts
One-click install
npx skills add https://github.com/Chris-Maskey/opencode-config --skill excalidraw-diagram-chris-maskey
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw-diagram
Source: https://github.com/Chris-Maskey/opencode-config/tree/main/skills/excalidraw
Command: npx skills add https://github.com/Chris-Maskey/opencode-config --skill excalidraw-diagram-chris-maskey

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill turns abstract or technical ideas into Excalidraw JSON diagrams that make a clear visual argument rather than merely displaying labeled boxes, reducing time spent iterating on layout, styling, and evidence for technical audiences.

Core Features & Use Cases

  • Argument-first diagrams: Produce .excalidraw files that prioritize structure and meaning so the diagram still communicates without text.
  • Multi-zoom, multi-section workflows: Create summary flows, section boundaries, and detailed evidence artifacts for comprehensive technical diagrams.
  • Evidence artifacts & research mandate: Embed code snippets, JSON samples, event names, and real input/output examples to teach and validate technical designs.
  • Brand-consistent styling: Read and apply the single-source color palette from references/color-palette.md for all fills, strokes, and evidence backgrounds.
  • Section-by-section JSON workflow & rendering: Build large diagrams incrementally and run the provided Playwright renderer to iterate with a render→view→fix loop.
  • Use cases: system architecture diagrams with real API payloads, protocol sequence visualizations with event names, educational tutorials that require readable code artifacts.

Quick Start

Create an Excalidraw JSON that visualizes the system architecture with multi-zoom sections, includes evidence artifacts, follows the color-palette in references/color-palette.md, and is ready for the provided renderer.

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 for system architecture?▼

You create Excalidraw JSON diagrams by building section-by-section JSON edits that apply a central color palette, include evidence artifacts, and validate output through a render-and-fix loop using the provided Playwright renderer.

What is an argument-first Excalidraw diagram?▼

An argument-first Excalidraw diagram prioritizes structure and visual meaning over labeled boxes, ensuring the technical concept remains clearly communicated even if the text is removed.

How do I embed evidence artifacts like code snippets into Excalidraw diagrams?▼

You embed evidence artifacts by including real code snippets, JSON samples, event names, and input/output examples directly within the Excalidraw JSON to teach and validate technical designs.

Can I use Playwright to render and validate Excalidraw JSON workflows?▼

Yes, you can use the provided Playwright renderer to run a render-view-fix loop, allowing you to iteratively build large multi-zoom diagrams and validate their visual output incrementally.

Does this approach support multi-zoom sections for comprehensive technical diagrams?▼

Yes, it supports multi-zoom and multi-section workflows, allowing you to create summary flows, define section boundaries, and detail evidence artifacts for comprehensive technical architectures.

How do I apply brand-consistent styling to Excalidraw diagrams?▼

You apply brand-consistent styling by reading and applying the single-source color palette from a referenced color-palette file for all fills, strokes, and evidence backgrounds within the Excalidraw JSON.

Related Skills

Explore More Design & Creative Skills→
zerowater-mayzerowater-may

excalidraw-diagram

Convert textual ideas into Excalidraw JSON diagrams with evidence artifacts.

Community
Advanced
2lab-ai2lab-ai
36

excalidraw-diagram

Generate Excalidraw JSON diagrams from natural language descriptions.

Official
Advanced
Chris-Chai-MinjaeChris-Chai-Minjae

excalidraw

Generate Excalidraw-compatible diagram JSON files as .excalidraw bundles.

Community
Intermediate
c-krausc-kraus

excalidraw-diagram

Generate Excalidraw diagram JSON files with template layouts and semantic color styling.

Community
Advanced