excalidraw
Generate an Excalidraw diagram from $ARGUMENTS.
Workflow
- Read
$SKILL_DIR/references/EXCALIDRAW_GUIDE.mdbefore doing layout work. For complex diagrams or exports, use the relevant sections instead of improvising structure. - Classify the request: architecture, flowchart, sequence, hub-and-spoke, hierarchy, ER-style, swimlane, or freeform concept map.
- Choose a style mode:
professionalby default for architecture, systems, APIs, workflows, and most technical diagramssketchonly when the user explicitly asks for a whiteboard, brainstorm, rough draft, or hand-drawn look
- Perform arrow-path analysis before placing components. If return arrows or non-adjacent connections would cross intermediate nodes, switch to a bypass path or 2D layout.
- Generate the JSON with descriptive IDs, explicit text sizing and colors, bidirectional bindings, and containers that fully cover grouped children.
- Save the result as
<descriptive-name>.excalidraw.jsonin the active directory. - If the user asked for PNG or SVG, or a rendered preview would materially help, try an export:
- SVG via Kroki when
curlis available - PNG or SVG via
excalidraw-brute-export-cliwhen the local CLI is available - If export tooling is unavailable, still deliver the JSON and explain what was missing
- SVG via Kroki when
- Return the created file paths, chosen diagram type, chosen style mode, and export status.
Rules
More from bahayonghang/my-claude-code-settings
tech-design-doc
Generate technical design documents with proper structure, diagrams, and implementation details. Use when designing a new feature, documenting architecture decisions, or planning refactoring work. Default language is English.
105bidwriter
智能标书编写专家,专精工程咨询、建筑设计、市政工程领域的投标文件编写。
70article-cover
Generate article cover images as SVG. Use when creating cover/banner/header graphics for blogs, documentation, social media cards, or OG images. Trigger this skill whenever the user mentions article covers, blog banners, post thumbnails, social sharing images, or any visual header for written content — even if they don't explicitly say 'SVG'. Do not use it for full-scene illustrations, photo editing, or slide theme work.
63tech-blog
Write technical blog posts with source code analysis OR doc-driven research. Use when user wants to explain system internals, architecture, implementation details, or technical concepts with citations.
53git-commit-cn
Safely orchestrate Chinese Conventional Commits for staged Git changes, or for all working-tree changes when the user explicitly asks to include everything. Use when the user asks to write a commit message, split staged changes, split all changes, commit everything regardless of stage state, include untracked files in the commit set, organize a messy index before committing, prepare a Chinese commit, draft a Conventional Commit, or generate structured commit text without pushing by default.
47gemini-image
>-
46