スキル一覧に戻る
kcchien

excalidraw

by kcchien

9🍴 0📅 2026年1月13日
GitHubで見るManusで実行

SKILL.md


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.

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

スコア

総合スコア

50/100

リポジトリの品質指標に基づく評価

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

レビュー

💬

レビュー機能は近日公開予定です