메뉴
Creating diagrams in any style — Mermaid flowcharts (structured, code-based) or Excalidraw (hand-drawn, organic). Use style parameter to select.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/nicsuzor/aops --skill diagram명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | diagram |
| type | skill |
| category | instruction |
| description | Creating diagrams in any style — Mermaid flowcharts (structured, code-based) or Excalidraw (hand-drawn, organic). Use style parameter to select. |
| triggers | ["create flowchart","mermaid diagram","process flow","draw diagram","mind map","visual diagram","diagram"] |
| modifies_files | true |
| needs_task | true |
| mode | execution |
| domain | ["design"] |
| allowed-tools | Read,Write,Edit,Skill |
| version | 1.0.0 |
| permalink | skills-diagram-skill |
| title | Diagram Design Skill |
Taxonomy note: This skill provides domain expertise (HOW) for creating diagrams. See [[aops-core/skills/remember/references/TAXONOMY.md]] for the skill/workflow distinction.
Purpose: Create diagrams that communicate clearly. Choose the right style for the job.
Invoke with a style argument:
diagram(style="mermaid", ...) — structured, code-based Mermaid flowcharts for process flows, decision trees, system diagramsdiagram(style="excalidraw", ...) — hand-drawn, organic Excalidraw diagrams for mind maps, concept maps, informal architecture sketchesQuick heuristic: Use mermaid when the diagram lives in documentation and needs version control. Use excalidraw when the diagram is for presentations, exploration, or visual communication where feel matters.
Purpose: Create Mermaid flowcharts that are clear, readable, and visually attractive.
Key principle: One message per chart. Hierarchy and chunking. Obvious flow. Distinct shapes for distinct semantics.
| Shape | Mermaid Syntax | Use For |
|---|---|---|
| Rectangle |
[text] |
| Process steps |
| Diamond | {text} | Decisions |
| Rounded | ([text]) | Start/End |
| Parallelogram | [/text/] | Data/IO |
| Stadium | ([text]) | Terminals |
<br/> lines or move detail to notes/legendsMaintain visual hierarchy and accessibility through deliberate color choices and consistent typography.
See [[references/color-and-styling]] for palettes, accessibility guidelines, and typography rules.
Default assumption: Charts are too tall. Optimize for horizontal spread - most users' screens are wider than tall.
| Content Type | Direction | When to Use | Result |
|---|---|---|---|
| Linear process (≤8 steps) | LR | Simple pipelines, single thread | 1 tall row, many columns (BEST) |
| Branching/decisions | TD | Multiple branches, complex logic | Wider at branch points |
| Parallel workflows | LR with direction TB subgraphs | Phases left-to-right, steps top-down | Compact horizontal grouping |
| Complex systems (>15) | LR + ELK layout | Systems with cross-links, multi-layer | Optimal automatic distribution |
PRINCIPLE: Prefer LR layout for 80% of use cases. It naturally spreads horizontally, matching screen dimensions.
For diagrams with many nodes (>15) or cross-links, ELK layout produces dramatically better results:
---
config:
layout: elk
elk:
mergeEdges: true
nodePlacementStrategy: SIMPLE
---
Place phases horizontally, let steps flow vertically within:
flowchart LR
subgraph PHASE1["Phase 1"]
direction TB
A1[Step 1] --> A2[Step 2]
end
subgraph PHASE2["Phase 2"]
direction TB
B1[Step 1] --> B2[Step 2]
end
PHASE1 --> PHASE2
Critical: Link between subgraphs, not between internal nodes. Internal-to-external links force direction inheritance.
Master advanced layout tricks, initialization blocks, and professional styling.
See [[references/mermaid-techniques]] for spacing configurations, multi-layer alignment, and semantic styling.
Ensure your charts meet high standards and avoid common Mermaid pitfalls.
See [[references/quality-and-anti-patterns]] for a final quality checklist and a list of common layout, visual, and structural sins.
For flows with many steps (10+ nodes), organize into numbered phases rather than one long chain.
flowchart TB
subgraph INIT["① INITIALIZATION"]
direction TB
S0([Start]) --> S1[Load Config]
S1 --> S2[Validate]
end
subgraph EXEC["② EXECUTION"]
direction TB
E1[Process] --> E2{Check}
E2 -->|OK| E3[Continue]
E2 -->|Fail| E1
end
subgraph END["③ CLEANUP"]
direction TB
C1[Save] --> C2([End])
end
INIT --> EXEC --> END
%% Side panels for auxiliary systems
subgraph AUX["⚡ AUXILIARY"]
A1[Helper 1]
A2[Helper 2]
end
E1 -.-> A1
C1 -.-> A2
style INIT fill:#ecfdf5,stroke:#059669,stroke-width:2px
style EXEC fill:#fefce8,stroke:#ca8a04,stroke-width:2px
style END fill:#f5f5f5,stroke:#737373,stroke-width:2px
style AUX fill:#fef2f2,stroke:#ef4444,stroke-width:1px,stroke-dasharray: 5 5
Key principles:
INIT --> EXEC --> END keeps main flow cleanSee [[references/templates-and-examples.md]] for complete templates including:
Purpose: Create hand-drawn, organic diagrams that communicate clearly and feel human.
Key principle: Rigid, corporate diagrams fail to engage. Sloppy, hand-drawn aesthetics with spatial mind-map layouts capture attention and convey meaning effectively.
For task visualization specifically, use the automated task_viz.py script instead of this skill:
uv run python skills/tasks/scripts/task_viz.py $ACA_DATA current-tasks.excalidraw
The script generates a complete force-directed layout of goals, projects, and tasks. Only invoke this diagram skill with style=excalidraw AFTER the script runs if manual refinement or customization is needed.
Always use these settings for the hand-drawn feel:
| Property | Value | Why |
|---|---|---|
roughness | 2 | Maximum sketchiness - embrace the hand-drawn aesthetic |
fontFamily | 1 (Virgil/xkcd script) | Handwritten font, NOT Helvetica |
strokeStyle | "solid" | But with high roughness looks hand-drawn |
fillStyle | "hachure" | Sketchy hatching, not solid fills |
Arrow style:
startBinding, endBinding) so they adapt when boxes moveLayout style:
Identical content looks completely different based on presentation. Position and style choices are critical.
Create hierarchy through:
Anti-pattern: Everything the same size/color/weight = visual chaos
Anti-pattern: Big blocks of text in boxes. Keep labels SHORT (1-5 words). Don't overload the user's view.
For mind maps and concept maps, apply four fundamental design principles: Proximity (group related elements), Alignment (consistent positioning), Contrast (hierarchy through visual differences), and Repetition (unified patterns).
Key guidelines: Use keywords over paragraphs, keep labels concise (1-5 words), visual over textual.
See [[references/mind-mapping-principles.md]] for complete principles and examples.
Phase 1: Structure (ignore aesthetics)
Phase 2: Visual Refinement (maintain structure)
Why this works: Ensures diagrams are both technically correct AND visually appealing.
Whitespace (negative space) is not "empty"—it's a powerful tool for:
Macro whitespace (between major sections):
Micro whitespace (within groups):
Rule of thumb: If it feels crowded, it IS crowded. Add more space than you think you need.
Colors: User's preferred muted terminal theme (see [[references/theme-colors.md]]) - muted gold, soft greens, blues, on WHITE backgrounds (NOT dark). Maintain 4.5:1 contrast ratio for accessibility.
Typography: XL (40-48px) titles, L (24-32px) headers, M (16-20px) body, S (12-14px) labels
Shapes: Rectangles (most versatile), circles (start/end/actors), diamonds (decisions), ellipses (organic feel for mind maps)
Arrows: Thin (1-2px) default, medium (3-4px) emphasis, must bind to shapes, click-click-click for multi-point. Curved arrows for organic/mind-map layouts. Directional arrows free up positioning - children can be placed anywhere around parent (not just below) to avoid overlap.
Icons: Material Symbols (recommended) or built-in libraries. Recolor to theme, use sparingly. See [[references/icon-integration.md]].
Layout: Prefer organic, spatial, mind-map layouts over rigid hierarchies. Spread elements to prevent arrow overlap - arrows are directional, so children can be positioned anywhere around parent (360° freedom). Grid snapping for precision, radial/clustered positioning for mind maps.
Grouping: Always bind text to containers using containerId property (programmatic) or group manually (select both → Cmd/Ctrl+G). Text should auto-size to container width. This ensures text moves WITH its box. See [[references/text-container-pattern.md]] for JSON binding pattern.
CRITICAL - Arrow Binding: Arrows MUST use startBinding and endBinding to anchor to boxes. This ensures arrows adapt when boxes are moved. Never create floating arrows.
See [[references/technical-details.md]] for complete specifications on colors, typography, shapes, arrows, layout, layering, and fill patterns. See [[references/theme-colors.md]] for user's preferred color palette. See [[references/text-container-pattern.md]] for text-in-container binding.
Before opening Excalidraw:
In Excalidraw (ignore aesthetics):
Now make it beautiful:
Establish visual hierarchy
Create spatial organization
Apply consistent styling
Refine and polish
Export settings:
See [[references/common-patterns.md]] for diagram templates: System Architecture, Process Flow, Concept/Mind Map, Graph/Network, and Comparison Matrix patterns.
Built-in libraries (~/.claude/skills/diagram/libraries/): 6 curated libraries available - awesome-icons, data-processing, data-viz, hearts, stick-figures, stick-figures-collaboration.
Material Symbols (RECOMMENDED for new icons): Professional icon set from Google Fonts. Import SVGs, recolor to theme palette. See [[references/icon-integration.md]] for complete workflow.
Quick start: Load via Excalidraw library panel → "Load library from file" → Select from ~/.claude/skills/diagram/libraries/
Usage tips:
#c9b458, Green #8fbc8f, Blue #7a9fbf, Orange #ffa500, Red #ff6666See [[references/library-guide.md]] for library loading, [[references/icon-integration.md]] for Material Symbols integration, [[references/theme-colors.md]] for color palette.
Before considering a diagram complete:
Visual hierarchy:
Alignment & spacing:
Color & contrast:
Arrows & flow:
Polish:
Visual sins:
The boring diagram:
Result: Technically accurate but visually dead. Nobody wants to look at it.
Drawing:
R or 2 → RectangleD or 3 → DiamondO or 4 → EllipseA or 5 → ArrowL or 6 → LineT or 7 → TextX → Freedraw toolE → EraserEditing:
Cmd/Ctrl + D → DuplicateCmd/Ctrl + Arrow → Duplicate + connect with arrowShift + V/H → Flip vertical/horizontalAlt + / → Stats for nerds (exact pixel dimensions)Cmd/Ctrl + ' → Toggle gridCmd/Ctrl + G → Group selectionCmd/Ctrl + Shift + G → UngroupCmd/Ctrl + K → Add link to selected elementSelection:
Cmd/Ctrl + A → Select allCmd/Ctrl + Click → Add to selectionShift while resizing → Maintain aspect ratioLayers/Z-order:
Cmd/Ctrl + ] → Bring forwardCmd/Ctrl + [ → Send backwardCmd/Ctrl + Shift + ] → Bring to frontCmd/Ctrl + Shift + [ → Send to backView:
Cmd/Ctrl + Wheel → Zoom in/outSpace + Drag → Pan canvasCmd/Ctrl + 0 → Reset zoom to 100%Cmd/Ctrl + 1 → Zoom to fit all elementsEssential techniques:
Alt/Option + S for precision alignmentCmd/Ctrl + Arrow for flowchartsAlt + / for exact pixel dimensionsCmd/Ctrl + K for clickable diagramsSee [[references/productivity-tips.md]] for complete list of 12 productivity techniques and keyboard shortcuts.
Excalisave: Save unlimited canvases locally Excalidraw Custom Font: Use custom .woff2 fonts
Paste table → chart:
For real-time canvas manipulation, see [[references/mcp-server-setup.md]].
Use cases:
Not needed for: Manual diagram creation, which is the primary use case.
For direct file manipulation or automation, see [[references/json-format.md]].
Use cases:
Not needed for: Standard diagram creation.
Excalidraw can import Mermaid.js diagrams and convert to hand-drawn style.
When to use: Quick generation of standard diagram types (flowcharts, sequence diagrams)
Limitation: Limited styling control, generic layouts—often needs significant manual refinement to look good.
Recommendation: Direct creation in Excalidraw produces better visual results.
The Goal: Create diagrams that are both accurate AND visually compelling.
Core Principles:
Remember: Boring diagrams fail to communicate, no matter how accurate. Invest in visual design to make your ideas memorable and impactful.
Quick wins:
For goal/project/task visualizations (mind-map style):
#c9b458, XL text: 40-48px)#8fbc8f, PROMINENT#888888, DE-EMPHASIZEDCore academicOps skill — institutional memory, strategic coordination, workflow routing, and framework governance. Merges butler (chief-of-staff) with framework development conventions.
Daily note lifecycle — compose and maintain a factual daily note. Reports the state of the day; does not prioritise or recommend. SSoT for daily note structure.
Emergency session bail — fast resume task + short handover, no commit/PR/reflection. For when you (or the user) need a clean context now. Use /end-session for canonical close.