{"enrichment":{"faq":[{"a":"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.","q":"How do I choose between Excalidraw and Mermaid for my diagram?"},{"a":"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.","q":"What are the technical diagramming best practices I should follow?"},{"a":"Diagramming guides you through flowchart creation by first choosing your tool\u2014Mermaid 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.","q":"How do I create a flowchart diagram with proper layout?"},{"a":"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.","q":"How should I layout diagram elements properly for clarity?"},{"a":"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.","q":"How can I improve my diagram's readability and design?"},{"a":"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.","q":"What conventions should I follow for sequence diagrams and architecture?"}],"shadow_tags":["visual-communication","layout-strategy","format-selection","design-principles","spatial-reasoning","diagram-types","semantic-styling","complexity-management","documentation-artifact","auto-layout-engine"],"summary_rewrite":"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\u2014ensuring every element serves a purpose and spacing reinforces meaning."},"files":[{"bytes":9811,"path":"plugins/the-blueprint/skills/diagramming/SKILL.md","sha256":"1f713f15663a4de29c0c1d2111c45c38b8fa5c681825c2885090ac2ff1ddaf70","url":"https://skillfed.io/files/xobotyi/cc-foundry/diagramming/c4e438fd/SKILL.md"}],"id":"xobotyi/cc-foundry/diagramming","links":{"html":"https://skillfed.io/xobotyi/cc-foundry/diagramming","md":"https://skillfed.io/xobotyi/cc-foundry/diagramming.md","repo":"https://github.com/xobotyi/cc-foundry"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":"JavaScript","last_updated":"2026-07-10","license":"MIT","name":"diagramming","publisher":"xobotyi","stars":18},"relations":{"similar":[{"id":"oakoss/agent-skills/mermaid-diagrams"},{"id":"akillness/jeo-skills/drawio"},{"id":"nimbalyst/nimbalyst/excalidraw"},{"id":"Tomlord1122/tomtom-skill/excalidraw-mermaid"},{"id":"curiositech/some_claude_skills/mermaid-graph-writer"},{"id":"BV-Venky/excalidraw-architect-mcp/excalidraw-diagram-design"},{"id":"tech-leads-club/agent-skills/mermaid-studio"},{"id":"el-feo/ai-context/mermaid-diagrams"},{"id":"shiwenwen/hope-agent/mermaid-diagram"},{"id":"tech-leads-club/agent-skills/excalidraw-studio"}]},"slug":{"owner":"xobotyi","repo":"cc-foundry","skill":"diagramming"},"version":"c4e438fd"}