{"enrichment":{"faq":[{"a":"excalidraw-diagrams helps you build Excalidraw diagrams with proper formatting and best practices. Start by describing what you want to visualize\u2014flowcharts, system architecture, wireframes, or any other diagram type. The skill generates the diagram structure, applies correct layout and typography, and handles element binding. You can then preview it inline in chat or export it as a file for sharing and editing.","q":"How do I create an Excalidraw diagram?"},{"a":"excalidraw-diagrams teaches best practices across all diagram elements. For shapes, use consistent sizing and alignment; for colors, apply a cohesive palette that aids readability; for text, keep labels clear and positioned within or near shapes; for connections, use connector lines with appropriate arrow styles. The skill guides proper spacing and layout to ensure your diagrams remain clean and professional.","q":"What are the best practices for Excalidraw shapes, colors, and text?"},{"a":"Yes. excalidraw-diagrams generates and saves Excalidraw diagram files ready for sharing and editing. After creating your diagram, you can export it as a .excalidraw file that opens in the Excalidraw desktop app, web editor, or VS Code extension. This workflow lets you finalize designs later or collaborate with others.","q":"Can I create a diagram and save it as an Excalidraw file?"},{"a":"excalidraw-diagrams handles shape creation and connector lines for you. Define your boxes (rectangles or other shapes), position them with proper spacing, then add connector lines with arrows between them. The skill applies best practices for line routing and arrow styling to keep your flowcharts and diagrams clear and visually organized.","q":"How do I draw boxes and connect them with arrows in Excalidraw?"},{"a":"excalidraw-diagrams supports inline preview in chat so you can see your diagram immediately without saving. This workflow is ideal for quick iterations and feedback. You can also choose to export to file instead, or do both\u2014preview first to verify the design, then save when ready.","q":"Can I preview Excalidraw diagrams inline in chat?"},{"a":"excalidraw-diagrams generates diagrams in the Excalidraw JSON-based file format (.excalidraw). This format stores all diagram elements\u2014shapes, text, connectors, colors, and styling\u2014in a structured way. Files are compatible with Excalidraw's web editor, desktop app, and VS Code extension, making them easy to share, version control, and edit across platforms.","q":"What is the Excalidraw file format and how does it work?"}],"shadow_tags":["visual-diagramming","shape-anchoring","diagram-export","flowchart-builder","vector-graphics","collaborative-sketching","layout-spacing","bound-connectors","file-generation"],"summary_rewrite":"This skill guides you through building Excalidraw diagrams with correct layout, typography, and element binding. Choose between inline preview, file output, or both workflows depending on whether you need the diagram in chat, saved for later, or both."},"files":[{"bytes":6762,"path":"Skills/excalidraw-diagrams/SKILL.md","sha256":"352d83ec33f9148c645a1de2b1de87de24e7daf92423536a876d35cf88468458","url":"https://skillfed.io/files/sammcj/agentic-coding/excalidraw-diagrams/f8098f06/SKILL.md"}],"id":"sammcj/agentic-coding/excalidraw-diagrams","links":{"html":"https://skillfed.io/sammcj/agentic-coding/excalidraw-diagrams","md":"https://skillfed.io/sammcj/agentic-coding/excalidraw-diagrams.md","repo":"https://github.com/sammcj/agentic-coding"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":24,"language":"HTML","last_updated":"2026-07-27","license":"Apache-2.0","name":"excalidraw-diagrams","publisher":"sammcj","stars":153},"relations":{"similar":[{"id":"tech-leads-club/agent-skills/excalidraw-studio"},{"id":"Agents365-ai/365-skills/excalidraw-skill"},{"id":"dirnbauer/webconsulting-skills/excalidraw"},{"id":"moltis-org/moltis/excalidraw"},{"id":"NousResearch/hermes-agent/excalidraw"},{"id":"kv0906/pm-kit/excalidraw"},{"id":"graniet/kheish/excalidraw"},{"id":"breferrari/obsidian-mind/excalidraw-diagram"},{"id":"Aradotso/mcp-skills/excalidraw-mcp-server"},{"id":"kv0906/cc-skills/excalidraw"}]},"slug":{"owner":"sammcj","repo":"agentic-coding","skill":"excalidraw-diagrams"},"version":"f8098f06"}