AgentSkillsCN

excalidraw

使用 Excalidraw JSON 格式创建专业级的图表与可视化内容。该技能专为 IT 架构图、流程图、网络拓扑、系统设计、微服务、ER 图以及状态机而打造,内置精选配色方案与多种视觉风格。当您处理 .excalidraw 文件,或当用户提及图表、流程图、架构可视化,或需要绘图时,此技能便能大显身手。为了避免因冗长的 JSON 数据导致上下文耗尽,该技能会委托子代理协助处理。

SKILL.md
--- frontmatter
name: excalidraw
description: Create professional diagrams and visualizations using Excalidraw JSON format. Specialized for IT architecture diagrams, flowcharts, network topology, system design, microservices, ER diagrams, and state machines. Includes curated color palettes and visual styles. Use when working with .excalidraw files, or when user mentions diagrams, flowcharts, architecture visualization, or drawing. Delegates to subagents to prevent context exhaustion from verbose JSON.

Excalidraw Diagram Skill

Create professional diagrams in Excalidraw JSON format.

Critical: Subagent Delegation

Main agents must NEVER read .excalidraw files directly.

Excalidraw JSON is extremely verbose (4,000 - 22,000+ tokens per file). Always delegate to subagent and request text summaries, never raw JSON.

code
Main Agent                          Subagent
    │                                   │
    ├── Provide task description ──────►│
    │                                   ├── Read/parse files
    │                                   ├── Execute operations
    │◄── Receive text summary ──────────┤

Component Libraries

Use pre-built components from libraries/ folder first.

Library Selection

Diagram TypeLibraries
AWSaws-architecture-icons
Azureazure-cloud-services
GCPgcp-icons, google-icons
System Designsoftware-architecture, system-design
Microservicessoftware-architecture, kubernetes-icons
Database/ERdatabase, uml-er-library
Flowchartflow-chart-symbols
Networknetwork-topology-icons
DevOps/CI/CDdevops-icons, technology-logos
Wireframebasic-ux-wireframing, web-kit

Priority Order

  1. Pre-downloaded → Check libraries/ folder
  2. Online → Fetch from libraries.excalidraw.com
  3. Custom → Build from basic shapes (last resort)

See LIBRARIES.md for usage details.


Workflow

Create Diagram

  1. Identify diagram type from user request
  2. Select appropriate library and palette
  3. Generate JSON with all required properties (see JSON-SCHEMA.md)
  4. Verify against Quality Checklist

Modify Diagram

  1. Read and parse existing file (via subagent)
  2. Apply requested changes
  3. Maintain style consistency
  4. Return summary of changes

Defaults

SettingDefaultNotes
Stylehand-drawnExcalidraw signature look
FontfontFamily: 1 (Virgil)Authentic hand-drawn feel
Roughness1Hand-drawn effect
Grid20pxAlignment base

Quality Checklist

Before delivering:

  • Visual hierarchy clear
  • Color follows 60-30-10 rule
  • Text contrast ≥4.5:1 (WCAG AA)
  • Elements aligned to 20px grid
  • Spacing ≥40px between elements
  • All connections clearly directed
  • Key elements labeled
  • Style consistent throughout

Reference Documentation

DocumentContent
JSON-SCHEMA.mdRequired - Complete JSON specification
ELEMENTS.mdElement types and properties
PALETTES.mdColor palette definitions
STYLES.mdVisual style configurations
ICONS.mdHand-drawn icon patterns (fallback)
LIBRARIES.mdComponent library reference
IT-DIAGRAMS.mdIT architecture templates
TEMPLATES.mdGeneral diagram templates