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
Decision gist · record as of 2026-07-27
Excalidraw-diagrams helps you create and update Excalidraw diagrams following best practices for spacing, colors, and anchored connections. 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.
Use it when
- excalidraw-diagrams teaches best practices across all diagram elements.
- Yes.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
sammcj/agentic-coding/excalidraw-diagrams · repository language: HTML
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 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)
File tree — 3 files
Skills/excalidraw-diagrams/SKILL.md
Skills/excalidraw-diagrams/_note.md
Skills/excalidraw-diagrams/scripts/generate_excalidraw.py
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 update Excalidraw diagrams with proper formatting and best practices”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Excalidraw Studio converts natural language into professional diagrams—flowcharts, mind maps, architecture designs, ER models, and more—saved as .excalidraw files ready to open in Excalidraw, VS Code, or Obsidian. Choose from sketch, clean, or mixed visual modes and leverage built-in templates for rapid diagram generation.
Excalidraw Skill generates technical diagrams and flowcharts in .excalidraw format, then exports them to PNG or SVG. Choose between Kroki API (zero setup, SVG only) or local CLI (PNG and SVG support). Use it when explaining systems with multiple components, multi-step processes, or any visualization that benefits from a visual layout.
Excalidraw analyzes your codebase to automatically generate architecture diagrams in .excalidraw format, complete with components, services, databases, and data flows mapped visually. Optionally export your diagrams to PNG or SVG for documentation and sharing.
Excalidraw lets you build sketchy, hand-drawn diagrams by writing element JSON and saving as .excalidraw files. Drop them into excalidraw.com for viewing, editing, or optionally upload for shareable links—no accounts or API keys required.
Excalidraw lets you build diagrams by writing standard element JSON and saving as `.excalidraw` files that open directly in excalidraw.com. Generate architecture diagrams, flowcharts, sequence diagrams, and concept maps with a simple JSON structure—no rendering libraries or authentication required. Upload files for shareable links or edit them locally.
excalidraw-generator transforms diagram descriptions into complete, valid .excalidraw.json files ready to open at excalidraw.com. It handles flowcharts, architecture diagrams, UML diagrams, and mind maps in both professional and hand-drawn styles, with precise layout calculations and proper element positioning.
More skills Excalidraw (Apache-2.0) · excalidraw-diagram (MIT) · Excalidraw Mcp Server (NOASSERTION) · Excalidraw (unlicensed)