excalidraw-diagrams
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.
Excalidraw-diagrams helps you create and update Excalidraw diagrams following best practices for spacing, colors, and anchored connections.
AI-generated summary based on this skill's SKILL.md
Install
sammcj/agentic-coding/excalidraw-diagrams · repository language: HTML
git clone https://github.com/sammcj/agentic-coding
cp -r agentic-coding/Skills/excalidraw-diagrams ~/.claude/skills/excalidraw-diagramsFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create an Excalidraw diagram?
excalidraw-diagrams helps you build Excalidraw diagrams with proper formatting and best practices. Start by describing what you want to visualize—flowcharts, 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.
What are the best practices for Excalidraw shapes, colors, and text?
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.
Can I create a diagram and save it as an Excalidraw file?
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.
How do I draw boxes and connect them with arrows in Excalidraw?
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.
Can I preview Excalidraw diagrams inline in chat?
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—preview first to verify the design, then save when ready.
What is the Excalidraw file format and how does it work?
excalidraw-diagrams generates diagrams in the Excalidraw JSON-based file format (.excalidraw). This format stores all diagram elements—shapes, text, connectors, colors, and styling—in 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.
SKILL.md
rendered from the published skill — quoted content, verbatim
Creating Excalidraw Diagrams
When creating Excalidraw diagrams, ensure you:
- Generate the layout with correct spacing
- Make consistent and logical use of colours, fonts, and shapes
- Text is correctly added within shapes, not as separate text elements (unless desired)
- Arrows and lines are correctly anchored / connected to shapes (not floating) so that when objects are moved any connections remain intact
- You save the Excalidraw diagram content to a file and link the file path
- Call
read_mebefore your firstcreate_viewcall each session - it provides the colour palette, camera sizes, layout rules, and element format reference. - If the user has asked you to create Excalidraw diagrams but you do not have the Excalidraw MCP enabled, you should ask them to add it for you, they can configured it by using the HTTP MCP URL of: https://excalidraw-mcp-app.vercel.app/mcp and they can view the MCP documentation here: https://github.com/excalidraw/excalidraw-mcp
Choose your workflow
Pick one based on what the user needs. Do
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 3 files
Skills/excalidraw-diagrams/SKILL.md
Skills/excalidraw-diagrams/_note.md
Skills/excalidraw-diagrams/scripts/generate_excalidraw.py