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
Decision gist · record as of 2026-07-10
Diagramming helps you create technical diagrams in Excalidraw or Mermaid with sound visual design. 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.
Use it when
- Diagramming emphasizes communication-first design: every element must serve a purpose.
- Diagramming guides you through flowchart creation by first choosing your tool—Mermaid for code-based consistency or Excalidraw.
Verify before relying
Read SKILL.md below before installing (5 files). Open directory: indexed for reading, not audited.
Install
xobotyi/cc-foundry/diagramming · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create or improve technical diagrams using Excalidraw or Mermaid”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Mermaid Diagrams converts text-based syntax into visual diagrams—flowcharts, sequence charts, ER models, class diagrams, Gantt timelines, and more. Embed diagrams directly in Markdown files and documentation. Perfect for system architecture, data modeling, and project planning without leaving your editor.
Drawio transforms text descriptions and existing codebases into polished, editable diagrams via the draw.io desktop CLI. It offers six diagram presets (ERD, UML class, sequence, architecture, ML/DL, flowchart), access to 10,000+ official AWS, Azure, GCP, Cisco, Kubernetes, and BPMN shapes, plus 321 AI and LLM brand logos. The skill includes vision-based self-checking and iterative refinement to ensure precision before exporting to your choice of formats.
Excalidraw is a whiteboard-style diagram editor for building flowcharts, architecture diagrams, system designs, and visual sketches. It provides tools to add shapes, arrows, frames, and organize elements with alignment and distribution. Use it for any visual diagram except database schemas, which should use DataModelLM instead.
Excalidraw Mermaid specializes in authoring Mermaid source code that converts seamlessly into Excalidraw drawings. It prioritizes visual clarity and supported diagram types, ensuring your output pastes once and renders without surprises.
Mermaid Graph Writer produces syntactically correct Mermaid diagrams by selecting the right diagram type for your content and applying consistent formatting rules. It handles flowcharts, sequence diagrams, state machines, ER models, timelines, mindmaps, Gantt charts, and other Mermaid-supported formats—but doesn't render them to images.
Mermaid Studio generates polished diagrams from descriptions or code, supporting flowcharts, sequences, ERDs, C4 architecture, AWS infrastructure, and 15+ other diagram types. Render to SVG, PNG, or ASCII with syntax validation and curated color themes built in.
More skills mermaid-diagrams (MIT) · Excalidraw Studio (NOASSERTION)