メニュー
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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Core 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.
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-EMPHASIZED