diagramming
Diagramming guides you through format selection, layout strategy, and design rules for creating clear, professional technical diagrams. Whether you're building flowcharts, architecture diagrams, or entity relationships in Excalidraw or Mermaid, it prioritizes communication first—ensuring every element serves a purpose and spacing reinforces meaning.
Diagramming helps you create technical diagrams in Excalidraw or Mermaid with sound visual design.
AI-generated summary based on this skill's SKILL.md
Install
xobotyi/cc-foundry/diagramming · repository language: JavaScript
git clone https://github.com/xobotyi/cc-foundry
cp -r cc-foundry/plugins/the-blueprint/skills/diagramming ~/.claude/skills/diagrammingFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I choose between Excalidraw and Mermaid for my diagram?
Diagramming helps you select the right tool based on your needs. Excalidraw excels at hand-drawn, flexible layouts for architecture and system diagrams where custom positioning matters. Mermaid works best for syntax-driven diagrams like flowcharts, sequence diagrams, and entity relationships when you want consistency and version control. Choose Excalidraw for visual freedom; choose Mermaid for structured, code-based precision.
What are the technical diagramming best practices I should follow?
Diagramming emphasizes communication-first design: every element must serve a purpose. Key practices include consistent spacing to reinforce meaning, clear visual hierarchy through size and color, logical flow direction (usually left-to-right or top-to-bottom), and semantic color coding that aligns with conventions. Group related elements, minimize crossing lines, and test readability at actual display size before finalizing.
How do I create a flowchart diagram with proper layout?
Diagramming guides you through flowchart creation by first choosing your tool—Mermaid for code-based consistency or Excalidraw for custom layouts. Plan your flow direction upfront, position decision points clearly, and use consistent shapes for each element type. Apply visual design principles: align elements to an invisible grid, space them evenly, and use color to distinguish process types. Test readability before sharing.
How should I layout diagram elements properly for clarity?
Diagramming teaches spatial layout strategies that make diagrams readable. Use consistent spacing between elements to create visual breathing room. Align nodes to grids or guides. Follow natural reading direction (left-to-right, top-to-bottom). Group related components visually. Minimize line crossings. Position labels clearly without obscuring connections. These coordinate positioning techniques ensure your diagram communicates intent without confusion.
How can I improve my diagram's readability and design?
Diagramming applies visual design principles to elevate clarity: use consistent line weights and arrow styles, employ semantic color coding (e.g., green for success, red for error), ensure sufficient contrast, and keep text minimal. Break complex diagrams into multiple parts rather than cramming everything into one view. Test with your audience. Remove decorative elements that don't serve communication. Prioritize function over aesthetics.
What conventions should I follow for sequence diagrams and architecture?
Diagramming covers diagram-specific conventions: sequence diagrams use vertical timelines with actors at top and interactions flowing downward; architecture diagrams layer components by tier and use consistent icons for services. Both benefit from clear labeling, logical grouping, and directional flow. Learn tool-specific syntax (Mermaid keywords, Excalidraw shapes) to implement these patterns correctly and maintain professional consistency.
SKILL.md
rendered from the published skill — quoted content, verbatim
Diagramming
Understandable first, beautiful second. Every diagram exists to communicate — if it fails to communicate, aesthetics are irrelevant. When both are achievable, pursue both.
References
- Visual design principles — [
${CLAUDE_SKILL_DIR}/references/design-principles.md] Gestalt principles, grid system, spacing rules, color palette, typography, complexity budgets, anti-patterns, Tufte's data-ink principle - Excalidraw format — [
${CLAUDE_SKILL_DIR}/references/excalidraw.md] JSON schema, element types, styling properties, arrow binding, layout templates (linear, grid, radial, tiered, decision tree), diagram type conventions - Mermaid syntax — [
${CLAUDE_SKILL_DIR}/references/mermaid.md] Flowchart, sequence, class, state, ER diagram syntax, theming, per-node styling, subgraphs
Format
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 5 files
plugins/the-blueprint/skills/diagramming/.dev/reference-inventory.json
plugins/the-blueprint/skills/diagramming/SKILL.md
plugins/the-blueprint/skills/diagramming/references/design-principles.md
plugins/the-blueprint/skills/diagramming/references/excalidraw.md
plugins/the-blueprint/skills/diagramming/references/mermaid.md