Experimental

Obsidian 可视化 Skills 套装

让 Claude Code 在 Obsidian 里生成 Canvas / Excalidraw / Mermaid 的可视化三件套

3 可视化技能
MIT 开源协议
Visual Skills

三大可视化技能

为 Claude Code 赋予专业的图表生成能力

✏️

Excalidraw

手绘风格图表,支持流程图、思维导图、关系图等8种类型

📊

Mermaid

专业图表生成,内置语法错误预防,兼容多种渲染器

🗺️

Canvas

交互式无限画布,支持思维导图和自由布局模式

技能详解

✏️ Excalidraw 图表生成器

生成手绘风格图表,输出为 Obsidian Excalidraw 插件可用的 .md 文件。

支持的图表类型

  • 流程图 - 步骤说明、工作流程
  • 思维导图 - 概念发散、主题分类
  • 层级图 - 组织结构、系统拆解
  • 关系图 - 要素之间的影响、依赖
  • 对比图 - 方案或观点的对照分析
  • 时间线图 - 事件发展、项目进度
  • 矩阵图 - 双维度分类、任务优先级

📊 Mermaid 可视化器

将文本内容转换为专业的 Mermaid 图表,内置语法错误预防机制。

支持的图表类型

  • 流程图 (graph TB/LR) - 工作流、决策树
  • 循环图 - 迭代过程、反馈循环
  • 对比图 - 前后对比、A vs B 分析
  • 时序图 - 组件交互、API 调用
  • 状态图 - 系统状态、生命周期

🗺️ Obsidian Canvas 创建器

创建交互式 .canvas 文件,支持思维导图和自由布局。

核心特性

  • 智能调整节点大小
  • 自动创建带标签的关系连线
  • 颜色编码节点(6种预设+自定义)
  • 合理间距算法,防止重叠

安装指南

前置要求

  • 已安装 Claude Code CLI
  • Obsidian 及 Excalidraw 插件

安装步骤

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

# 复制 skills 到 Claude Code 目录
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/