excalidraw-diagram
π―Skillfrom axtonliu/axton-obsidian-visual-skills
|Generates hand-drawn style diagrams in Excalidraw format within Obsidian, converting text descriptions into visual representations like flowcharts, mind maps, and hierarchical structures.
Installation
npx skills add https://github.com/axtonliu/axton-obsidian-visual-skills --skill excalidraw-diagramSkill Details
Overview
# Obsidian Visual Skills Pack
[](https://opensource.org/licenses/MIT)
[](#status)
[δΈζζζ‘£](README_CN.md)
Visual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code.
Demo
Excalidraw Mermaid Canvas 
Hand-drawn style Hierarchical flowchart Colorful card layout
Video Demo
[](https://youtu.be/TUJ_3G1cylc)
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](https://docs.anthropic.com/en/docs/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 directly in Obsidian using the Excalidraw plugin. Creates .md files with embedded Excalidraw JSON that opens natively in Obsidian.
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:
- Auto-saves
.mdfiles ready for Obsidian Excalidraw plugin - Hand-drawn aesthetic with Excalifont (fontFamily: 5)
- Full Chinese text support with proper character handling
- Consistent color palette and styling guidelines
Trigger words: Excalidraw, diagram, flowchart, mind map, η»εΎ, ζ΅η¨εΎ, ζη»΄ε―ΌεΎ, ε―θ§ε
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