Obsidian Visual Skills Pack
Visual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code.
Next Step: Want to turn Skills from demo to asset? Check out Agent Skills Resource Library (includes slides, PDF, diagnostics)
Demo
| Excalidraw | Mermaid | Canvas |
 |  |  |
| Hand-drawn style | Hierarchical flowchart | Colorful card layout |
Video Demo
Status
Status: Experimental
- This is a public prototype that works for my demos, but does not yet cover all input scales and edge cases.
- Output quality varies based on model version and input structure; results may fluctuate.
- My primary focus is demonstrating how tools and systems work together, not maintaining this codebase.
- If you encounter issues, please submit a reproducible case (input + output file + steps to reproduce).
What Are Skills?
Skills are prompt-based extensions for Claude Code that give Claude specialized capabilities. Unlike MCP servers that require complex setup, skills are simple markdown files that Claude loads on demand.
Included Skills
1. Excalidraw Diagram Generator
Generate hand-drawn style diagrams with three output modes:
| Mode | Output | Use Case |
|---|---|---|
| Obsidian (default) | .md | Open directly in Obsidian |
| Standard | .excalidraw | Open/edit/share on excalidraw.com |
| Animated | .excalidraw | Generate animations with excalidraw-animate |
Supported Diagram Types:
| Type | Best For |
|---|---|
| Flowchart | Step-by-step processes, workflows, task sequences |
| Mind Map | Concept expansion, topic categorization, brainstorming |
| Hierarchy | Org charts, content levels, system decomposition |
| Relationship | Dependencies, influences, interactions between elements |
| Comparison | Side-by-side analysis of approaches or options |
| Timeline | Event progression, project milestones, evolution |
| Matrix | 2D categorization, priority grids, positioning |
| Freeform | Scattered ideas, initial exploration, free-form notes |
Key Features:
- Three output modes for different use cases
- Hand-drawn aesthetic with Excalifont (fontFamily: 5)
- Full Chinese text support with proper character handling
- Animation support with customizable element order
Trigger words:
- Obsidian:
Excalidraw,diagram,flowchart,mind map,画图,流程图 - Standard:
标准Excalidraw,standard excalidraw - Animated:
Excalidraw动画,动画图,animate
2. Mermaid Visualizer
Transform text content into professional Mermaid diagrams optimized for presentations and documentation. Includes built-in syntax error prevention for common pitfalls.
Supported Diagram Types:
- Process Flow (graph TB/LR) - Workflows, decision trees, AI agent architectures
- Circular Flow - Cyclic processes, feedback loops, continuous improvement
- Comparison Diagram - Before/after, A vs B analysis, traditional vs modern
- Mindmap - Hierarchical concepts, knowledge organization
- Sequence Diagram - Component interactions, API calls, message flows
- State Diagram - System states, status transitions, lifecycle stages
Key Features:
- Built-in syntax error prevention (list conflicts, subgraph naming, special characters)
- Configurable layouts: vertical/horizontal, simple/standard/detailed
- Professional color schemes with semantic meaning
- Compatible with Obsidian, GitHub, and other Mermaid renderers
Trigger words: Mermaid, visualize, flowchart, sequence diagram, 可视化
3. Obsidian Canvas Creator
Create interactive Obsidian Canvas (.canvas) files with MindMap or freeform layouts. Outputs valid JSON Canvas format that opens directly in Obsidian.
Layout Modes: