Claude Code skills that generate Excalidraw, Mermaid, and Obsidian Canvas diagrams from text.
Forked from axton-obsidian-visual-skills by Axton Liu and localized to English. The original repo has a video walkthrough and demo images.
Experimental prototype. It works well for common cases, but output quality varies with model version and input structure. Bug reports with a reproducible case (input + output file + steps) are welcome; feature requests may not be acted on.
Hand-drawn style diagrams (Excalifont) with bound elements and three output modes:
| Mode | Output | Use |
|---|---|---|
| Obsidian (default) | .md |
Open in Obsidian |
| Standard | .excalidraw |
Open/share on excalidraw.com |
| Animated | .excalidraw |
Animate via excalidraw-animate |
Diagram types: flowchart, mind map, hierarchy, relationship, comparison, timeline, matrix, freeform.
Triggers: Excalidraw, diagram, flowchart, mind map; standard excalidraw; animate.
Mermaid diagrams with built-in syntax-error prevention (list conflicts, subgraph naming, special characters) and configurable layouts.
Diagram types: process flow, circular flow, comparison, mindmap, sequence, state.
Triggers: Mermaid, visualize, flowchart, sequence diagram.
Valid JSON Canvas (.canvas) files with smart node sizing, labeled edges, color-coded nodes, and overlap-avoiding spacing.
Layouts: MindMap (radial hierarchy) or Freeform (custom positioning).
Triggers: Canvas, mind map, visual diagram.
Requires the Claude Code CLI. The Excalidraw skill's Obsidian mode also needs the Excalidraw plugin.
Plugin marketplace (recommended):
/plugin marketplace add samcolmanetti/visual-skills
/plugin install obsidian-visual-skills
Restart Claude Code to load the skills.
Manual:
git clone https://github.com/samcolmanetti/visual-skills.git
cp -r visual-skills/{excalidraw-diagram,mermaid-visualizer,obsidian-canvas-creator} ~/.claude/skills/Claude Code uses these skills automatically when you ask for a visualization:
"Create an Excalidraw flowchart showing the CI/CD pipeline"
"Visualize this process as a Mermaid sequence diagram"
"Turn this article into an Obsidian Canvas"
visual-skills/
├── excalidraw-diagram/ # SKILL.md, references/ (JSON schema), assets/ (example)
├── mermaid-visualizer/ # SKILL.md, references/ (syntax rules)
├── obsidian-canvas-creator/ # SKILL.md, references/, assets/ (templates)
├── README.md
└── LICENSE
- Axton Liu: original author of axton-obsidian-visual-skills
- Excalidraw, Mermaid, JSON Canvas, Obsidian
MIT License, see LICENSE. Maintained by Sam Colmanetti.