{
  "markdown": "# Obsidian Visual Skills Pack\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Status: Experimental](https://img.shields.io/badge/Status-Experimental-orange.svg)](#status)\n\n**[中文文档](README_CN.md)**\n\nVisual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code.\n\n> **Next Step:** Want to turn Skills from demo to asset? Check out [Agent Skills Resource Library](https://www.axtonliu.ai/agent-skills) (includes slides, PDF, diagnostics)\n\n## Demo\n\n<table>\n<tr>\n<td align=\"center\"><strong>Excalidraw</strong></td>\n<td align=\"center\"><strong>Mermaid</strong></td>\n<td align=\"center\"><strong>Canvas</strong></td>\n</tr>\n<tr>\n<td><img src=\"assets/excalidraw-demo.png\" width=\"280\" alt=\"Excalidraw Demo\"></td>\n<td><img src=\"assets/mermaid-demo.png\" width=\"280\" alt=\"Mermaid Demo\"></td>\n<td><img src=\"assets/canvas-demo.png\" width=\"280\" alt=\"Canvas Demo\"></td>\n</tr>\n<tr>\n<td align=\"center\"><em>Hand-drawn style</em></td>\n<td align=\"center\"><em>Hierarchical flowchart</em></td>\n<td align=\"center\"><em>Colorful card layout</em></td>\n</tr>\n</table>\n\n### Video Demo\n\n[![Watch the demo](https://img.youtube.com/vi/TUJ_3G1cylc/maxresdefault.jpg)](https://youtu.be/TUJ_3G1cylc)\n\n## Status\n\n> **Status: Experimental**\n>\n> - This is a public prototype that works for my demos, but does not yet cover all input scales and edge cases.\n> - Output quality varies based on model version and input structure; results may fluctuate.\n> - My primary focus is demonstrating how tools and systems work together, not maintaining this codebase.\n> - If you encounter issues, please submit a reproducible case (input + output file + steps to reproduce).\n\n## What Are Skills?\n\nSkills 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.\n\n## Included Skills\n\n### 1. Excalidraw Diagram Generator\n\nGenerate hand-drawn style diagrams with three output modes:\n\n| Mode | Output | Use Case |\n|------|--------|----------|\n| **Obsidian** (default) | `.md` | Open directly in Obsidian |\n| **Standard** | `.excalidraw` | Open/edit/share on excalidraw.com |\n| **Animated** | `.excalidraw` | Generate animations with [excalidraw-animate](https://dai-shi.github.io/excalidraw-animate/) |\n\n**Supported Diagram Types:**\n\n| Type | Best For |\n|------|----------|\n| **Flowchart** | Step-by-step processes, workflows, task sequences |\n| **Mind Map** | Concept expansion, topic categorization, brainstorming |\n| **Hierarchy** | Org charts, content levels, system decomposition |\n| **Relationship** | Dependencies, influences, interactions between elements |\n| **Comparison** | Side-by-side analysis of approaches or options |\n| **Timeline** | Event progression, project milestones, evolution |\n| **Matrix** | 2D categorization, priority grids, positioning |\n| **Freeform** | Scattered ideas, initial exploration, free-form notes |\n\n**Key Features:**\n- Three output modes for different use cases\n- Hand-drawn aesthetic with Excalifont (fontFamily: 5)\n- Full Chinese text support with proper character handling\n- Animation support with customizable element order\n\n**Trigger words:**\n- Obsidian: `Excalidraw`, `diagram`, `flowchart`, `mind map`, `画图`, `流程图`\n- Standard: `标准Excalidraw`, `standard excalidraw`\n- Animated: `Excalidraw动画`, `动画图`, `animate`\n\n### 2. Mermaid Visualizer\n\nTransform text content into professional Mermaid diagrams optimized for presentations and documentation. Includes built-in syntax error prevention for common pitfalls.\n\n**Supported Diagram Types:**\n- **Process Flow** (graph TB/LR) - Workflows, decision trees, AI agent architectures\n- **Circular Flow** - Cyclic processes, feedback loops, continuous improvement\n- **Comparison Diagram** - Before/after, A vs B analysis, traditional vs modern\n- **Mindmap** - Hierarchical concepts, knowledge organization\n- **Sequence Diagram** - Component interactions, API calls, message flows\n- **State Diagram** - System states, status transitions, lifecycle stages\n\n**Key Features:**\n- Built-in syntax error prevention (list conflicts, subgraph naming, special characters)\n- Configurable layouts: vertical/horizontal, simple/standard/detailed\n- Professional color schemes with semantic meaning\n- Compatible with Obsidian, GitHub, and other Mermaid renderers\n\n**Trigger words:** `Mermaid`, `visualize`, `flowchart`, `sequence diagram`, `可视化`\n\n### 3. Obsidian Canvas Creator\n\nCreate interactive Obsidian Canvas (`.canvas`) files with MindMap or freeform layouts. Outputs valid JSON Canvas format that opens directly in Obsidian.\n\n**Layout Modes:**\n\n| Mode | Structure | Best For |\n|------|-----------|----------|\n| **MindMap** | Radial hierarchy from center | Brainstorming, topic exploration, hierarchical content |\n| **Freeform** | Custom positioning, flexible connections | Complex networks, non-hierarchical content, custom arrangements |\n\n**Key Features:**\n- Smart node sizing based on content length\n- Automatic edge creation with labeled relationships\n- Color-coded nodes (6 preset colors + custom hex)\n- Proper spacing algorithms to prevent overlap\n- Group nodes for visual organization\n\n**Trigger words:** `Canvas`, `mind map`, `visual diagram`, `思维导图`\n\n## Installation\n\n### Prerequisites\n\n- [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code) installed\n- [Obsidian](https://obsidian.md/) with relevant plugins:\n  - [Excalidraw plugin](https://github.com/zsviczian/obsidian-excalidraw-plugin) (for Excalidraw skill)\n\n### Option A: Plugin Marketplace (Recommended)\n\nInstall via Claude Code's plugin system:\n\n```\n/plugin marketplace add axtonliu/axton-obsidian-visual-skills\n/plugin install obsidian-visual-skills\n```\n\nThen restart Claude Code to load the skills.\n\n### Option B: Manual Installation\n\nCopy the skill folders to your Claude Code skills directory:\n\n```bash\n# Clone the repository\ngit clone https://github.com/axtonliu/axton-obsidian-visual-skills.git\n\n# Copy skills to Claude Code directory\ncp -r axton-obsidian-visual-skills/excalidraw-diagram ~/.claude/skills/\ncp -r axton-obsidian-visual-skills/mermaid-visualizer ~/.claude/skills/\ncp -r axton-obsidian-visual-skills/obsidian-canvas-creator ~/.claude/skills/\n```\n\nOr copy individual skills as needed.\n\n## Usage\n\nOnce installed, Claude Code will automatically use these skills when you ask for visualizations:\n\n```\n# Excalidraw\n\"Create an Excalidraw flowchart showing the CI/CD pipeline\"\n\"Draw a mind map about machine learning concepts\"\n\"用 Excalidraw 画一个商业模式关系图\"\n\n# Mermaid\n\"Visualize this process as a Mermaid diagram\"\n\"Create a sequence diagram for the API authentication flow\"\n\"把这个工作流程转成 Mermaid 图表\"\n\n# Canvas\n\"Turn this article into an Obsidian Canvas\"\n\"Create a mind map canvas for project planning\"\n\"把这篇文章整理成 Canvas 思维导图\"\n```\n\n## File Structure\n\n```\naxton-obsidian-visual-skills/\n├── excalidraw-diagram/\n│   ├── SKILL.md              # Main skill definition\n│   ├── assets/               # Example outputs\n│   └── references/           # Excalidraw JSON schema\n├── mermaid-visualizer/\n│   ├── SKILL.md\n│   └── references/           # Syntax rules & error prevention\n├── obsidian-canvas-creator/\n│   ├── SKILL.md\n│   ├── assets/               # Template canvas files\n│   └── references/           # Canvas spec & layout algorithms\n├── README.md\n├── README_CN.md\n└── LICENSE\n```\n\n## Troubleshooting\n\n### Excalidraw: Chinese text not showing as handwriting font\n\nThe skill correctly sets `fontFamily: 5` (Excalifont). However, **Excalifont only covers Latin characters** — CJK handwriting font (Xiaolai) is loaded dynamically from the network.\n\n**Why it works for me:** My Chinese text displays in handwriting style because the font loads successfully from Excalidraw.com.\n\n**Why it might not work for you:**\n- Offline mode or unstable network connection\n- Cannot access Excalidraw.com (firewall, etc.)\n\n**Solutions:**\n\n**Option A (Online):** Ensure your network can access Excalidraw.com\n\n**Option B (Offline):**\n1. Download CJK font files from [Excalidraw GitHub](https://github.com/excalidraw/excalidraw/tree/master/public/fonts)\n2. Place them in your vault's `Excalidraw/CJK Fonts` folder\n3. In Excalidraw plugin settings, enable \"Load Chinese fonts from file at startup\"\n4. Restart Obsidian (required for settings to take effect)\n\n## Contributing\n\nContributions welcome (low-maintenance project):\n\n- Reproducible bug reports (input + output + steps + environment)\n- Documentation improvements\n- Small PRs (fixes/docs)\n\n> **Note:** Feature requests may not be acted on due to limited maintenance capacity.\n\n## Acknowledgments\n\nThis project builds upon these excellent open-source tools and specifications:\n\n- [Excalidraw](https://excalidraw.com/) - Hand-drawn style whiteboard\n- [Mermaid](https://mermaid.js.org/) - Diagram and chart generation\n- [JSON Canvas](https://jsoncanvas.org/) - Open file format for infinite canvas (MIT License)\n- [Obsidian](https://obsidian.md/) - Knowledge base application\n\n## License\n\nMIT License - see [LICENSE](LICENSE) for details.\n\n---\n\n## Author\n\n**Axton Liu** - AI Educator & Creator\n\n- Website: [axtonliu.ai](https://www.axtonliu.ai)\n- YouTube: [@AxtonLiu](https://youtube.com/@AxtonLiu)\n- Twitter/X: [@axtonliu](https://twitter.com/axtonliu)\n\n### Learn More\n\n- [MAPS™ AI Agent Course](https://www.axtonliu.ai/aiagent) - Systematic AI agent skills training\n- [Claude Skills: A Systematic Guide](https://www.axtonliu.ai/newsletters/ai-2/posts/claude-agent-skills-maps-framework) - Complete methodology\n- [AI Elite Weekly Newsletter](https://www.axtonliu.ai/newsletters/ai-2) - Weekly AI insights\n- [Free AI Course](https://www.axtonliu.ai/axton-free-course) - Get started with AI\n\n---\n\n© AXTONLIU™ & AI 精英学院™ 版权所有\n",
  "bytes": 9857,
  "sha": "03ba820f18431bb11895f5211f02e506e97598753f2c7cb46ad50c6ad4777d9b",
  "repo_slug": "axtonliu/axton-obsidian-visual-skills",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_axtonliu_axton_obsidian_visual_skills_ob_0b96b53b/readme"
}