{"id":38232389,"url":"https://github.com/axtonliu/axton-obsidian-visual-skills","last_synced_at":"2026-01-17T01:01:09.109Z","repository":{"id":332202063,"uuid":"1131797886","full_name":"axtonliu/axton-obsidian-visual-skills","owner":"axtonliu","description":"Visual Skills Pack for Obsidian: generate Canvas, Excalidraw, and Mermaid diagrams from text with Claude Code","archived":false,"fork":false,"pushed_at":"2026-01-12T20:31:21.000Z","size":1168,"stargazers_count":356,"open_issues_count":0,"forks_count":32,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-01-13T01:27:16.552Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axtonliu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-10T18:01:37.000Z","updated_at":"2026-01-13T01:18:43.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/axtonliu/axton-obsidian-visual-skills","commit_stats":null,"previous_names":["axtonliu/axton-obsidian-visual-skills"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/axtonliu/axton-obsidian-visual-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axtonliu%2Faxton-obsidian-visual-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axtonliu%2Faxton-obsidian-visual-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axtonliu%2Faxton-obsidian-visual-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axtonliu%2Faxton-obsidian-visual-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axtonliu","download_url":"https://codeload.github.com/axtonliu/axton-obsidian-visual-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axtonliu%2Faxton-obsidian-visual-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28490901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T00:50:05.742Z","status":"ssl_error","status_checked_at":"2026-01-17T00:43:11.982Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-17T01:00:52.104Z","updated_at":"2026-01-17T01:01:09.070Z","avatar_url":"https://github.com/axtonliu.png","language":null,"funding_links":[],"categories":["Claude Code Skills","Others","Uncategorized","⭐ 精选第三方技能","Media \u0026 Content Generation","Diagram and Visual Skills"],"sub_categories":["设计与创意","Uncategorized","🎨 内容创作"],"readme":"# 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## Demo\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eExcalidraw\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eMermaid\u003c/strong\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cstrong\u003eCanvas\u003c/strong\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"assets/excalidraw-demo.png\" width=\"280\" alt=\"Excalidraw Demo\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"assets/mermaid-demo.png\" width=\"280\" alt=\"Mermaid Demo\"\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"assets/canvas-demo.png\" width=\"280\" alt=\"Canvas Demo\"\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003cem\u003eHand-drawn style\u003c/em\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cem\u003eHierarchical flowchart\u003c/em\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003cem\u003eColorful card layout\u003c/em\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\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\u003e **Status: Experimental**\n\u003e\n\u003e - This is a public prototype that works for my demos, but does not yet cover all input scales and edge cases.\n\u003e - Output quality varies based on model version and input structure; results may fluctuate.\n\u003e - My primary focus is demonstrating how tools and systems work together, not maintaining this codebase.\n\u003e - 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 directly in Obsidian using the Excalidraw plugin. Creates `.md` files with embedded Excalidraw JSON that opens natively in Obsidian.\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- Auto-saves `.md` files ready for Obsidian Excalidraw plugin\n- Hand-drawn aesthetic with Excalifont (fontFamily: 5)\n- Full Chinese text support with proper character handling\n- Consistent color palette and styling guidelines\n\n**Trigger words:** `Excalidraw`, `diagram`, `flowchart`, `mind map`, `画图`, `流程图`, `思维导图`, `可视化`\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 \u0026 error prevention\n├── obsidian-canvas-creator/\n│   ├── SKILL.md\n│   ├── assets/               # Template canvas files\n│   └── references/           # Canvas spec \u0026 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\u003e **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 \u0026 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- [Claude Skills 万字长文：从指令到资产的系统化构建指南](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™ \u0026 AI 精英学院™ 版权所有\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxtonliu%2Faxton-obsidian-visual-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxtonliu%2Faxton-obsidian-visual-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxtonliu%2Faxton-obsidian-visual-skills/lists"}