How do I preview the generated Excalidraw files?

The skill includes a render_excalidraw.py script that uses Playwright to automatically convert your JSON diagrams into PNG files for instant validation.

Can I customize the visual style of the diagrams?

Yes, you can modify the color-palette.md reference file to define your own brand colors, stroke styles, and evidence artifact backgrounds.

How does this skill differ from standard AI diagramming?

Unlike generic diagram generators, this skill follows a 'Visual Argument' philosophy, ensuring structures teach concepts through specific evidence artifacts like real code snippets and data formats.

Does it support complex, multi-section architectures?

Absolutely. It uses a structured section-by-section workflow to build comprehensive diagrams that maintain high detail without exceeding token limits.

Excalidraw Diagram Creator

Name: Excalidraw Diagram Creator
Author: bdmorin

bybdmorin

•

デザインツール

Generates professional Excalidraw diagrams that visually argue and document technical architectures, workflows, and complex concepts.

This skill empowers Claude to produce high-quality, research-backed Excalidraw diagrams that move beyond simple boxes and lines. By prioritizing 'visual arguments' over static displays, it creates educational artifacts complete with code snippets, data examples, and multi-layered architectures. The skill includes a built-in rendering pipeline to validate designs via Python and Playwright, supporting a standardized brand palette to ensure every diagram is both technically accurate and aesthetically consistent for documentation or presentations.

主な機能

01Evidence Artifacts: Embeds real code snippets, JSON payloads, and UI mockups directly into technical diagrams.

02Visual Argument Methodology: Focuses on communicating meaning through shape and structure rather than just text labels.

03Automated Rendering: Validates and converts .excalidraw JSON files to PNG images using a specialized Python toolchain.

041 GitHub stars

05Multi-Zoom Architecture: Creates diagrams with varying levels of detail, from high-level summaries to deep technical specifics.

06Customizable Brand Styles: Utilizes a centralized color palette and element templates for consistent visual identity.

ユースケース

01Visualizing complex system architectures and data flow protocols with real-world code examples.

02Creating educational technical documentation that teaches through concrete visual evidence.

03Mapping out intricate user journeys and UI/UX flows with integrated state transitions.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bdmorin/the-no-shop excalidraw-diagram

For use in Claude.ai and ChatGPT

主な機能

01Evidence Artifacts: Embeds real code snippets, JSON payloads, and UI mockups directly into technical diagrams.

02Visual Argument Methodology: Focuses on communicating meaning through shape and structure rather than just text labels.

03Automated Rendering: Validates and converts .excalidraw JSON files to PNG images using a specialized Python toolchain.

041 GitHub stars

05Multi-Zoom Architecture: Creates diagrams with varying levels of detail, from high-level summaries to deep technical specifics.

06Customizable Brand Styles: Utilizes a centralized color palette and element templates for consistent visual identity.

ユースケース

01Visualizing complex system architectures and data flow protocols with real-world code examples.

02Creating educational technical documentation that teaches through concrete visual evidence.

03Mapping out intricate user journeys and UI/UX flows with integrated state transitions.