axton-obsidian-visual-skills README

The project's README from github.com/axtonliu/axton-obsidian-visual-skills. As one markdown file: README.md.

Obsidian Visual Skills Pack

License: MIT Status: Experimental

中文文档

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
Excalidraw Demo Mermaid Demo Canvas Demo
Hand-drawn style Hierarchical flowchart Colorful card layout

Video Demo

Watch the 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:

Trigger words:

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:

Key Features:

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:

Mode Structure Best For
MindMap Radial hierarchy from center Brainstorming, topic exploration, hierarchical content
Freeform Custom positioning, flexible connections Complex networks, non-hierarchical content, custom arrangements

Key Features:

Trigger words: Canvas, mind map, visual diagram, 思维导图

Installation

Prerequisites

Install via Claude Code's plugin system:

/plugin marketplace add axtonliu/axton-obsidian-visual-skills
/plugin install obsidian-visual-skills

Then restart Claude Code to load the skills.

Option B: Manual Installation

Copy the skill folders to your Claude Code skills directory:

# Clone the repository
git clone https://github.com/axtonliu/axton-obsidian-visual-skills.git

# Copy skills to Claude Code directory
cp -r axton-obsidian-visual-skills/excalidraw-diagram ~/.claude/skills/
cp -r axton-obsidian-visual-skills/mermaid-visualizer ~/.claude/skills/
cp -r axton-obsidian-visual-skills/obsidian-canvas-creator ~/.claude/skills/

Or copy individual skills as needed.

Usage

Once installed, Claude Code will automatically use these skills when you ask for visualizations:

# Excalidraw
"Create an Excalidraw flowchart showing the CI/CD pipeline"
"Draw a mind map about machine learning concepts"
"用 Excalidraw 画一个商业模式关系图"

# Mermaid
"Visualize this process as a Mermaid diagram"
"Create a sequence diagram for the API authentication flow"
"把这个工作流程转成 Mermaid 图表"

# Canvas
"Turn this article into an Obsidian Canvas"
"Create a mind map canvas for project planning"
"把这篇文章整理成 Canvas 思维导图"

File Structure

axton-obsidian-visual-skills/
├── excalidraw-diagram/
│   ├── SKILL.md              # Main skill definition
│   ├── assets/               # Example outputs
│   └── references/           # Excalidraw JSON schema
├── mermaid-visualizer/
│   ├── SKILL.md
│   └── references/           # Syntax rules & error prevention
├── obsidian-canvas-creator/
│   ├── SKILL.md
│   ├── assets/               # Template canvas files
│   └── references/           # Canvas spec & layout algorithms
├── README.md
├── README_CN.md
└── LICENSE

Troubleshooting

Excalidraw: Chinese text not showing as handwriting font

The skill correctly sets fontFamily: 5 (Excalifont). However, Excalifont only covers Latin characters — CJK handwriting font (Xiaolai) is loaded dynamically from the network.

Why it works for me: My Chinese text displays in handwriting style because the font loads successfully from Excalidraw.com.

Why it might not work for you:

Solutions:

Option A (Online): Ensure your network can access Excalidraw.com

Option B (Offline):

  1. Download CJK font files from Excalidraw GitHub
  2. Place them in your vault's Excalidraw/CJK Fonts folder
  3. In Excalidraw plugin settings, enable "Load Chinese fonts from file at startup"
  4. Restart Obsidian (required for settings to take effect)

Contributing

Contributions welcome (low-maintenance project):

Note: Feature requests may not be acted on due to limited maintenance capacity.

Acknowledgments

This project builds upon these excellent open-source tools and specifications:

License

MIT License - see LICENSE for details.

Author

Axton Liu - AI Educator & Creator

Learn More

© AXTONLIU™ & AI 精英学院™ 版权所有

axton-obsidian-visual-skills (axtonliu/axton-obsidian-visual-skills)

Searching Database…

3.6K ·GitHub
Axton-obsidian-visual-skills
Что это?Пакет визуальных навыков (Visual Skills Pack), который дает Claude Code возможность по запросу превращать простой текст в диаграммы Obsidian Canvas, Excalidraw и Mermaid.
Это плагин Obsidian или нечто, работающее через Claude Code?Это не плагин Obsidian — это набор Skills на основе промптов (обычные markdown-файлы), которые Claude Code подгружает по мере необходимости для генерации файлов диаграмм, а те вы затем открываете в Obsidian.
Нужен ли еще и плагин Obsidian Excalidraw?Нужен установленный Claude Code CLI, а для навыка Excalidraw конкретно — еще и плагин Excalidraw внутри Obsidian.
Достаточно ли это стабильно, чтобы полагаться на него?Нет, проект явно помечен как Experimental: это публичный прототип, который работает в демо автора, но не покрывает все масштабы входных данных и краевые случаи, а качество результата может меняться в зависимости от версии модели.
Работает ли навык Excalidraw полностью офлайн?В основном да, но китайский рукописный шрифт (Xiaolai) для Excalidraw подгружается динамически с Excalidraw.com, поэтому при работе офлайн или за файрволом нужно вручную скачать и подключить файлы CJK-шрифта локально.
Какие типы диаграмм умеет рисовать навык Excalidraw?Блок-схемы, майндмэпы, иерархии, диаграммы связей, сравнения, таймлайны, матрицы и свободные макеты; результат — в виде Obsidian markdown, стандартных файлов .excalidraw или анимированных версий.
Что может генерировать навык Mermaid?Процессные потоки, циклические потоки, сравнительные диаграммы, майндмэпы, диаграммы последовательностей и диаграммы состояний, со встроенными проверками синтаксиса, чтобы избежать типичных ошибок Mermaid.
Что создает Obsidian Canvas Creator?Корректные файлы JSON Canvas (.canvas) либо в радиальной раскладке майндмэпа, либо в свободной, с автоматическим подбором размера узлов, отступов и подписанными связями.
What are similar projects?answer-me-with-html, mermaid, mind-map, archify, obsidian-skills, diagram-design, second-brain-os, claude-scholar
Which topics is it in?mindmap, mermaid, flowchart, diagram, diagrams, obsidian, claude-skill, canvas, knowledge-management, note-taking, agent-skill, visualization
Creator
axtonliu
Size
1.1 MB
Stars
3.6K
Updated
CommitFeb 12Releasev1.2.1Feb 12
Age
9mo
Commits · 90 Days