[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75111":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":9,"languages":9,"totalLinesOfCode":9,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":13,"lastSyncTime":25,"discoverSource":26},75111,"axton-obsidian-visual-skills","axtonliu\u002Faxton-obsidian-visual-skills","axtonliu","Visual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code",null,2985,270,14,2,0,24,227,71.3,"MIT License",false,"main",[],"2026-06-11 04:06:24","# Obsidian Visual Skills Pack\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n[![Status: Experimental](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FStatus-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:\u002F\u002Fwww.axtonliu.ai\u002Fagent-skills) (includes slides, PDF, diagnostics)\n\n## Demo\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cstrong>Excalidraw\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Mermaid\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cstrong>Canvas\u003C\u002Fstrong>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"assets\u002Fexcalidraw-demo.png\" width=\"280\" alt=\"Excalidraw Demo\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"assets\u002Fmermaid-demo.png\" width=\"280\" alt=\"Mermaid Demo\">\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"assets\u002Fcanvas-demo.png\" width=\"280\" alt=\"Canvas Demo\">\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd align=\"center\">\u003Cem>Hand-drawn style\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Hierarchical flowchart\u003C\u002Fem>\u003C\u002Ftd>\n\u003Ctd align=\"center\">\u003Cem>Colorful card layout\u003C\u002Fem>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n### Video Demo\n\n[![Watch the demo](https:\u002F\u002Fimg.youtube.com\u002Fvi\u002FTUJ_3G1cylc\u002Fmaxresdefault.jpg)](https:\u002F\u002Fyoutu.be\u002FTUJ_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:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-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\u002Fedit\u002Fshare on excalidraw.com |\n| **Animated** | `.excalidraw` | Generate animations with [excalidraw-animate](https:\u002F\u002Fdai-shi.github.io\u002Fexcalidraw-animate\u002F) |\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\u002FLR) - Workflows, decision trees, AI agent architectures\n- **Circular Flow** - Cyclic processes, feedback loops, continuous improvement\n- **Comparison Diagram** - Before\u002Fafter, 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\u002Fhorizontal, simple\u002Fstandard\u002Fdetailed\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:\u002F\u002Fdocs.anthropic.com\u002Fen\u002Fdocs\u002Fclaude-code) installed\n- [Obsidian](https:\u002F\u002Fobsidian.md\u002F) with relevant plugins:\n  - [Excalidraw plugin](https:\u002F\u002Fgithub.com\u002Fzsviczian\u002Fobsidian-excalidraw-plugin) (for Excalidraw skill)\n\n### Option A: Plugin Marketplace (Recommended)\n\nInstall via Claude Code's plugin system:\n\n```\n\u002Fplugin marketplace add axtonliu\u002Faxton-obsidian-visual-skills\n\u002Fplugin 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:\u002F\u002Fgithub.com\u002Faxtonliu\u002Faxton-obsidian-visual-skills.git\n\n# Copy skills to Claude Code directory\ncp -r axton-obsidian-visual-skills\u002Fexcalidraw-diagram ~\u002F.claude\u002Fskills\u002F\ncp -r axton-obsidian-visual-skills\u002Fmermaid-visualizer ~\u002F.claude\u002Fskills\u002F\ncp -r axton-obsidian-visual-skills\u002Fobsidian-canvas-creator ~\u002F.claude\u002Fskills\u002F\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\u002FCD 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\u002F\n├── excalidraw-diagram\u002F\n│   ├── SKILL.md              # Main skill definition\n│   ├── assets\u002F               # Example outputs\n│   └── references\u002F           # Excalidraw JSON schema\n├── mermaid-visualizer\u002F\n│   ├── SKILL.md\n│   └── references\u002F           # Syntax rules & error prevention\n├── obsidian-canvas-creator\u002F\n│   ├── SKILL.md\n│   ├── assets\u002F               # Template canvas files\n│   └── references\u002F           # 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:\u002F\u002Fgithub.com\u002Fexcalidraw\u002Fexcalidraw\u002Ftree\u002Fmaster\u002Fpublic\u002Ffonts)\n2. Place them in your vault's `Excalidraw\u002FCJK 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\u002Fdocs)\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:\u002F\u002Fexcalidraw.com\u002F) - Hand-drawn style whiteboard\n- [Mermaid](https:\u002F\u002Fmermaid.js.org\u002F) - Diagram and chart generation\n- [JSON Canvas](https:\u002F\u002Fjsoncanvas.org\u002F) - Open file format for infinite canvas (MIT License)\n- [Obsidian](https:\u002F\u002Fobsidian.md\u002F) - 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:\u002F\u002Fwww.axtonliu.ai)\n- YouTube: [@AxtonLiu](https:\u002F\u002Fyoutube.com\u002F@AxtonLiu)\n- Twitter\u002FX: [@axtonliu](https:\u002F\u002Ftwitter.com\u002Faxtonliu)\n\n### Learn More\n\n- [MAPS™ AI Agent Course](https:\u002F\u002Fwww.axtonliu.ai\u002Faiagent) - Systematic AI agent skills training\n- [Claude Skills: A Systematic Guide](https:\u002F\u002Fwww.axtonliu.ai\u002Fnewsletters\u002Fai-2\u002Fposts\u002Fclaude-agent-skills-maps-framework) - Complete methodology\n- [AI Elite Weekly Newsletter](https:\u002F\u002Fwww.axtonliu.ai\u002Fnewsletters\u002Fai-2) - Weekly AI insights\n- [Free AI Course](https:\u002F\u002Fwww.axtonliu.ai\u002Faxton-free-course) - Get started with AI\n\n---\n\n© AXTONLIU™ & AI 精英学院™ 版权所有\n","axtonliu\u002Faxton-obsidian-visual-skills 是一个为 Obsidian 设计的可视化技能包，能够通过 Claude Code 从文本生成 Canvas、Excalidraw 和 Mermaid 图表。该项目的核心功能包括支持多种图表类型如流程图、思维导图、层次结构图等，并且提供了三种输出模式：Obsidian 格式（默认）、标准 Excalidraw 文件以及动画 Excalidraw 文件。适用于需要将复杂信息以图形化方式展示的场景，如项目管理、知识整理或教学演示。当前状态为实验性阶段，旨在展示工具与系统如何协同工作。","2026-06-11 03:52:23","high_star"]