Claude MarketplacesSubmit
axtonliu avatar

Excalidraw Diagram

axtonliu/axton-obsidian-visual-skills

Turns Excalidraw diagram creation from a layout puzzle into a text prompt. You get three output formats: Obsidian markdown for quick vault integration, standard JSON for excalidraw.com editing, or animated sequences that work with excalidraw-animate. The skill handles the tedious parts like coordinate calculation, proper font sizing (minimum 14px, defaults to Excalifont), and color palette selection across eight diagram types from flowcharts to mind maps. It automatically saves to your working directory and includes animation ordering if you want sequential reveals. Honestly most useful when you need a diagram fast and don't want to fiddle with manual positioning, though you'll probably still tweak the output in the actual Excalidraw editor.

skills.sh installs
3K
GitHub stars
3.7K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add axtonliu/axton-obsidian-visual-skills --skill excalidraw-diagram --agent claude-code

Installs into .claude/skills of the current project.

Files

Excalidraw Diagram Generator

Create Excalidraw diagrams from text content with multiple output formats.

Output Modes

根据用户的触发词选择输出模式：

触发词输出模式文件格式用途
Excalidraw、画图、流程图、思维导图Obsidian（默认）.md在 Obsidian 中直接打开
标准Excalidraw、standard excalidrawStandard.excalidraw在 excalidraw.com 打开/编辑/分享
Excalidraw动画、动画图、animateAnimated.excalidraw拖到 excalidraw-animate 生成动画

Workflow

  1. Detect output mode from trigger words (see Output Modes table above)
  2. Analyze content - identify concepts, relationships, hierarchy
  3. Choose diagram type (see Diagram Types below)
  4. Generate Excalidraw JSON (add animation order if Animated mode)
  5. Output in correct format based on mode
  6. Automatically save to current working directory
  7. Notify user with file path and usage instructions

Output Formats

Mode 1: Obsidian Format (Default)

严格按照以下结构输出，不得有任何修改：

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/axtonliu/axton-obsidian-visual-skills
Categories
Design & UI/UX, Office & Documents

More from axtonliu/axton-obsidian-visual-skills

All 3

Recommended

More Design & UI/UX
1nexu-io avatarfield-notes-editorial-templatenexu-io/open-designEditorial "Field Notes" report template with soft paper background, serif hero typography, rounded pastel insight cards, and a retention chart panel. Use when u2.9Kskills.sh installs
2nexu-io avatarposter-heronexu-io/open-designVertical poster or Moments-style share image with strong visual impact.2.9Kskills.sh installs
3nexu-io avatarhtml-ppt-retro-quarterly-reviewnexu-io/open-designRetro Quarterly Review presentation template in a bold blue + orange editorial language. Use when users ask for a high-impact quarterly review / roadmap deck wi2.9Kskills.sh installs
4nexu-io avataralgorithmic-artnexu-io/open-designCreate generative art using p5.js with seeded randomness so every render is reproducible. Useful for procedural posters, motion-style stills, and artistic frame2.9Kskills.sh installs
5nexu-io avatarstitch-loopnexu-io/open-designIterative design-to-code feedback loop. Critique → adjust → ship cycle for tightening visual fidelity between brief and built UI.2.8Kskills.sh installs
6nexu-io avatarvideo-hyperframesnexu-io/open-designHyperframes / Remotion-compatible continuous frame animation with autoplay support.2.8Kskills.sh installs