你是否也是这种状态：

笔记写得很勤快，但一到画流程图就卡壳？

很多团队文档、项目复盘，最后都死在一个点：图表太费时间。今天介绍的

Obsidian Visual Skills 套装

，不是一个普通的插件，而是给 AI (Claude Code) 安装的

“画图技能包”

。它能把“画图”从体力活变成

一键生成的自动化流程

。


一、 什么是 Obsidian Visual Skills？(技术原理)

这套工具本质上是

Claude Code

的提示词扩展 (Skills)。

它不像复杂的 SaaS 软件需要服务端配置。你只需要把 Skills 文件放入 Claude 的配置目录，AI 就能获得

“直接操作文件系统”

的能力。你负责用“人话”描述需求，Claude 负责直接生成符合

Obsidian

格式的

.md

或

.canvas

源文件。


Excalidraw
Mermaid
Canvas

手绘风格
层级流程图
彩色卡片布局


二、 “可视化三件套”选型：Skills 怎么用？

这套 Skills 包含三个核心模块，分别对应不同的

沟通场景

：


🎨 Skill 1: Excalidraw 生成器


适合：

给老板汇报、给客户提案、需要“手绘温度”的文档。


能力：

  • 生成带 JSON 数据的

    .md

    文件。

  • 手绘美学：

    自动应用 Excalifont 字体。

  • 中文友好：

    完美处理中文字符渲染。


🚀 常用指令：

“画一个 CI/CD 流程图”


⚙️ Skill 2: Mermaid 可视化器


适合：

技术文档、API 时序图、状态机、研发内部沟通。


能力：


  • 结构化：

    基于代码生成，方便版本管理 (Git)。

  • 防错机制：

    Skills 内置了语法纠错逻辑。

  • 语义配色：

    自动区分模块颜色。


🚀 常用指令：

“生成登录认证的时序图”


🧩 Skill 3: Obsidian Canvas 创建器


适合：

头脑风暴、复杂知识整理、将长文章拆解为卡片墙。


能力：


  • 智能布局：

    算法自动计算节点间距，拒绝重叠。

  • 颜色编码：

    6 种预设颜色，自动区分内容层级。


🚀 常用指令：

“把这篇文章整理成 Canvas 思维导图”


三、 3分钟快速部署 (SOP)

前提条件：已安装

Claude Code CLI

和

Obsidian

。


安装步骤 (复制执行)：

只需将 Skills 文件夹复制到 Claude 的配置目录即可激活技能。 

# 1. 克隆 Skills 仓库
git clone https://github.com/axtonliu/axton-obsidian-visual-skills.git

# 2. 安装 Skills (macOS/Linux 命令)
# Windows 用户请手动复制文件夹到 %USERPROFILE%\\.claude\\skills
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/


四、 避坑指南：如何稳定输出？

这套 Skills 目前属于

Experimental (实验性)

原型。为了保证图表质量，请遵循以下专家建议：


  • 不要喂长文：

    避免直接把 5000 字文章丢给它。

  • 先结构化：

    先让 Claude 总结出“6-10 个关键节点和关系”，再发送“请画图”指令。

  • 特殊符号：

    中文夹杂复杂符号（如 LaTeX）可能导致 Mermaid 渲染失败，建议先让 AI 清洗文本。


📥 资源获取

Obsidian Visual Skills 是连接

AI 逻辑

与

可视化笔记

的桥梁。你写得越多，它越省你时间。


*本项目开源免费，建议 Star 收藏。