excalidraw-diagram

Name: excalidraw-diagram
Author: axtonliu

Productivity Community

Repo stars 2,946
Author updated Live
Author repo axton-obsidian-visual-skills

Fluxly profile Facts only: domain, agents, trust score, runtime, permissions and network

Domain: Productivity
Compatible agents: Claude Code
Cursor
Cline
Codex
Windsurf
Gemini CLI

+20
Trust score: 88 / 100 · community maintained
Author / version / license: @axtonliu · no license declared
Token usage: Lean
Setup complexity: Guided setup
External API key: Not required
Operating systems: Unspecified (assume cross-platform)
Runtime requirements: No special requirements
Permissions: Read-only
Write / modify
Network behavior: Local-only
Install commands: 26 variants

Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.

Heads up: 未限定 allowed-tools，默认拥有全部工具权限。

Output preview excalidraw-diagram.preview

---
name: excalidraw-diagram
description: Create Excalidraw diagrams from text content with multiple output formats. | 触发词 | 输出模式 | 文件格式 |…
category: productivity
runtime: no special runtime
---

# excalidraw-diagram output preview

## PART A: Task fit
- Use case: Create Excalidraw diagrams from text content with multiple output formats. | 触发词 | 输出模式 | 文件格式 | 用途 | |--------|----------|----------|------| | Excalidraw、画图、流程图、思维导图 | Obsidian（默认） | .md | 在 Obsidian 中直接打开 | runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “Output Modes / Workflow / Output Formats” and do not present inference as author intent.

## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “Create Excalidraw diagrams from text content with multiple output formats. | 触发词 | 输出模式 | 文件格式 | 用途 | |--------|----------|----------|------| | Excalidraw、画图、流程图、思维导图 | Obsidian（默认） | .md | 在 Obsidian 中直接打开 | runs entirely locally. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “Output Modes / Workflow / Output Formats” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.

## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options.

SKILL.md SKILL.md

---
name: excalidraw-diagram
description: Create Excalidraw diagrams from text content with multiple output formats. | 触发词 | 输出模式 | 文件格式 |…
category: productivity
source: axtonliu/axton-obsidian-visual-skills
---

# excalidraw-diagram

## When to use
- Create Excalidraw diagrams from text content with multiple output formats. | 触发词 | 输出模式 | 文件格式 | 用途 | |--------|------…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.

## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.

## Execution rules
- Organize steps around “Output Modes / Workflow / Output Formats” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.

## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies.

Evidence boundary and execution chain

The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.

skill "excalidraw-diagram" {
  input      -> user goal + target files + boundaries + acceptance criteria
  context    -> Output Modes / Workflow / Output Formats
  rules      -> SKILL.md triggers / order / output contract
  runtime    -> no special runtime | read files, write/modify files | mostly runs locally
  guardrails -> usually needs no extra API key + small-sample validation + diff/log review
  output     -> copyable result + checklist + next iteration
}

Interpretation is structured for decision-making; original keeps the upstream SKILL.md unchanged.

Decide Fit First

Core job: Create Excalidraw diagrams from text content with multiple output formats. | 触发词 | 输出模式 | 文件格式 | 用途 | |--------|----------|-----…
Best fit: Use it when the task has reusable inputs, steps, and validation criteria rather than a one-off answer.
Avoid forcing it: If the source lacks commands, platform support, or external-service evidence, keep those fields unknown instead of guessing.

Design Intent

Structure: The skill is organized around “Output Modes”, “Workflow”, “Output Formats”, “Mode 1: Obsidian Format (Default)”, showing how the author expects the agent to judge fit, collect context, and produce verifiable output.
Trigger evidence: Prioritize the author’s wording around when to use it, what context to collect, and what output shape to produce.
Evidence boundary: Author text states facts, repository files prove commands and paths, and Fluxly only adds fit, limits, and usage judgment.

How To Use It

Inputs: Provide target material, scope, expected result, forbidden changes, and validation method.
Invocation: Name excalidraw-diagram directly; if the source includes slash commands, start with the command and then add task context.
Validation: Start small and check whether the result follows “Output Modes / Workflow / Output Formats” before expanding.

Boundaries And Review

Dependencies: It usually needs no extra API key, so start with a small validation task.
Permissions: Declared permissions include read / write; ask the agent to state file, command, and rollback boundaries before acting.
Quality bar: A useful result names the deliverable, evidence, and next action. Generic prose means the task needs tighter context.

Excalidraw Diagram Generator

Create Excalidraw diagrams from text content with multiple output formats.

Output Modes

根据用户的触发词选择输出模式：

触发词	输出模式	文件格式	用途
`Excalidraw`、`画图`、`流程图`、`思维导图`	Obsidian（默认）	`.md`	在 Obsidian 中直接打开
`标准Excalidraw`、`standard excalidraw`	Standard	`.excalidraw`	在 excalidraw.com 打开/编辑/分享
`Excalidraw动画`、`动画图`、`animate`	Animated	`.excalidraw`	拖到 excalidraw-animate 生成动画

Workflow

Detect output mode from trigger words (see Output Modes table above)
Analyze content - identify concepts, relationships, hierarchy
Choose diagram type (see Diagram Types below)
Generate Excalidraw JSON (add animation order if Animated mode)
Output in correct format based on mode
Automatically save to current working directory
Notify user with file path and usage instructions

Output Formats

Mode 1: Obsidian Format (Default)

严格按照以下结构输出，不得有任何修改：

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{JSON 完整数据}
\`\`\`
%%

关键要点：

Frontmatter 必须包含 tags: [excalidraw]
警告信息必须完整
JSON 必须被 %% 标记包围
不能使用 excalidraw-plugin: parsed 以外的其他 frontmatter 设置
文件扩展名：.md

Mode 2: Standard Excalidraw Format

直接输出纯 JSON 文件，可在 excalidraw.com 打开：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": {
    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}

关键要点：

source 使用 https://excalidraw.com（不是 Obsidian 插件）
纯 JSON，无 Markdown 包装
文件扩展名：.excalidraw

Mode 3: Animated Excalidraw Format

与 Standard 格式相同，但每个元素添加 customData.animate 字段控制动画顺序：

{
  "id": "element-1",
  "type": "rectangle",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他标准字段
}

动画顺序规则：

order: 动画播放顺序（1, 2, 3...），数字越小越先出现
duration: 该元素的绘制时长（毫秒），默认 500
相同 order 的元素同时出现
建议顺序：标题 → 主要框架 → 连接线 → 细节文字

使用方法：

生成 .excalidraw 文件
拖到 https://dai-shi.github.io/excalidraw-animate/
点击 Animate 预览，然后导出 SVG 或 WebM

文件扩展名：.excalidraw

Diagram Types & Selection Guide

选择合适的图表形式，以提升理解力与视觉吸引力。

类型	英文	使用场景	做法
流程图	Flowchart	步骤说明、工作流程、任务执行顺序	用箭头连接各步骤，清晰表达流程走向
思维导图	Mind Map	概念发散、主题分类、灵感捕捉	以中心为核心向外发散，放射状结构
层级图	Hierarchy	组织结构、内容分级、系统拆解	自上而下或自左至右构建层级节点
关系图	Relationship	要素之间的影响、依赖、互动	图形间用连线表示关联，箭头与说明
对比图	Comparison	两种以上方案或观点的对照分析	左右两栏或表格形式，标明比较维度
时间线图	Timeline	事件发展、项目进度、模型演化	以时间为轴，标出关键时间点与事件
矩阵图	Matrix	双维度分类、任务优先级、定位	建立 X 与 Y 两个维度，坐标平面安置
自由布局	Freeform	内容零散、灵感记录、初步信息收集	无需结构限制，自由放置图块与箭头

Design Rules

Text & Format

所有文本元素必须使用 fontFamily: 5（Excalifont 手写字体）
文本中的双引号替换规则：" 替换为 『』
文本中的圆括号替换规则：() 替换为 「」
字体大小规则（硬性下限，低于此值在正常缩放下不可读）：
- 标题：20-28px（最小 20px）
- 副标题：18-20px
- 正文/标签：16-18px（最小 16px）
- 次要注释：14px（仅限不重要的辅助说明，慎用）
- 绝对禁止低于 14px
行高：所有文本使用 lineHeight: 1.25
文字居中估算：独立文本元素没有自动居中，需手动计算 x 坐标：
- 估算文字宽度：estimatedWidth = text.length * fontSize * 0.5（CJK 字符用 * 1.0）
- 居中公式：x = centerX - estimatedWidth / 2
- 示例：文字 "Hello"（5字符, fontSize 20）居中于 x=300 → estimatedWidth = 5 * 20 * 0.5 = 50 → x = 300 - 25 = 275

Layout & Design

画布范围：建议所有元素在 0-1200 x 0-800 区域内
最小形状尺寸：带文字的矩形/椭圆不小于 120x60px
元素间距：最小 20-30px 间距，防止重叠
层次清晰：使用不同颜色和形状区分不同层级的信息
图形元素：适当使用矩形框、圆形、箭头等元素来组织信息
禁止 Emoji：不要在图表文本中使用任何 Emoji 符号，如需视觉标记请使用简单图形（圆形、方形、箭头）或颜色区分

Color Palette

文字颜色（strokeColor for text）：

用途	色值	说明
标题	`#1e40af`	深蓝
副标题/连接线	`#3b82f6`	亮蓝
正文文字	`#374151`	深灰（白底最浅不低于 `#757575`）
强调/重点	`#f59e0b`	金色

形状填充色（backgroundColor, fillStyle: "solid"）：

色值	语义	适用场景
`#a5d8ff`	浅蓝	输入、数据源、主要节点
`#b2f2bb`	浅绿	成功、输出、已完成
`#ffd8a8`	浅橙	警告、待处理、外部依赖
`#d0bfff`	浅紫	处理中、中间件、特殊项
`#ffc9c9`	浅红	错误、关键、告警
`#fff3bf`	浅黄	备注、决策、规划
`#c3fae8`	浅青	存储、数据、缓存
`#eebefa`	浅粉	分析、指标、统计

区域背景色（大矩形 + opacity: 30，用于分层图表）：

色值	语义
`#dbe4ff`	前端/UI 层
`#e5dbff`	逻辑/处理层
`#d3f9d8`	数据/工具层

对比度规则：

白底上文字最浅不低于 #757575，否则不可读
浅色填充上用深色变体文字（如浅绿底用 #15803d，不用 #22c55e）
避免浅灰色文字（#b0b0b0、#999）出现在白底上

参考：references/excalidraw-schema.md

JSON Structure

Obsidian 模式：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://github.com/zsviczian/obsidian-excalidraw-plugin",
  "elements": [...],
  "appState": { "gridSize": null, "viewBackgroundColor": "#ffffff" },
  "files": {}
}

Standard / Animated 模式：

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://excalidraw.com",
  "elements": [...],
  "appState": { "gridSize": null, "viewBackgroundColor": "#ffffff" },
  "files": {}
}

Element Template

Each element requires these fields (do NOT add extra fields like frameId, index, versionNonce, rawText -- they may cause issues on excalidraw.com. boundElements must be null not [], updated must be 1 not timestamps):

{
  "id": "unique-id",
  "type": "rectangle",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1,
  "link": null,
  "locked": false
}

strokeStyle values: "solid"（实线，默认）| "dashed"（虚线）| "dotted"（点线）。虚线适合表示可选路径、异步流、弱关联等。

Text elements add:

{
  "text": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

Animated 模式额外添加 customData 字段：

{
  "id": "title-1",
  "type": "text",
  "customData": {
    "animate": {
      "order": 1,
      "duration": 500
    }
  },
  ...其他字段
}

See references/excalidraw-schema.md for all element types.

Additional Technical Requirements

Text Elements 处理

## Text Elements 部分在 Markdown 中必须留空，仅用 %% 作为分隔符
Obsidian ExcaliDraw 插件会根据 JSON 数据自动填充文本元素
不需要手动列出所有文本内容

坐标与布局

坐标系统：左上角为原点 (0,0)
推荐范围：所有元素在 0-1200 x 0-800 像素范围内
元素 ID：每个元素需要唯一的 id（可以是字符串，如「title」「box1」等）

Required Fields for All Elements

IMPORTANT: Do NOT include frameId, index, versionNonce, or rawText fields. Use boundElements: null (not []), and updated: 1 (not timestamps).

{
  "id": "unique-identifier",
  "type": "rectangle|text|arrow|ellipse|diamond",
  "x": 100, "y": 100,
  "width": 200, "height": 50,
  "angle": 0,
  "strokeColor": "#color-hex",
  "backgroundColor": "transparent|#color-hex",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid|dashed|dotted",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "roundness": {"type": 3},
  "seed": 123456789,
  "version": 1,
  "isDeleted": false,
  "boundElements": null,
  "updated": 1,
  "link": null,
  "locked": false
}

Text-Specific Properties

文本元素 (type: "text") 需要额外属性（do NOT include rawText）：

{
  "text": "显示文本",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": null,
  "originalText": "显示文本",
  "autoResize": true,
  "lineHeight": 1.25
}

appState 配置

"appState": {
  "gridSize": null,
  "viewBackgroundColor": "#ffffff"
}

files 字段

"files": {}

Common Mistakes to Avoid

文字偏移 — 独立 text 元素的 x 是左边缘，不是中心。必须用居中公式手动计算，否则文字会偏到一边
元素重叠 — y 坐标相近的元素容易堆叠。放置新元素前检查与周围元素是否有至少 20px 间距
画布留白不足 — 内容不要贴着画布边缘。在四周留 50-80px 的 padding
标题没有居中于图表 — 标题应居中于下方图表的整体宽度，不是固定在 x=0
箭头标签溢出 — 长文字标签（如 "ATP + NADPH"）会超出短箭头。保持标签简短或加大箭头长度
对比度不够 — 浅色文字在白底上几乎不可见。文字颜色不低于 #757575，有色文字用深色变体
字号太小 — 低于 14px 在正常缩放下不可读，正文最小 16px

Implementation Notes

Auto-save & File Generation Workflow

当生成 Excalidraw 图表时，必须自动执行以下步骤：

1. 选择合适的图表类型

根据用户提供的内容特性，参考上方「Diagram Types & Selection Guide」表
分析内容的核心诉求，选择最合适的可视化形式

2. 生成有意义的文件名

根据输出模式选择文件扩展名：

模式	文件名格式	示例
Obsidian	`[主题].[类型].md`	`商业模式.relationship.md`
Standard	`[主题].[类型].excalidraw`	`商业模式.relationship.excalidraw`
Animated	`[主题].[类型].animate.excalidraw`	`商业模式.relationship.animate.excalidraw`

优先使用中文以提高清晰度

3. 使用 Write 工具自动保存文件

保存位置：当前工作目录（自动检测环境变量）
完整路径：{current_directory}/[filename].md
这样可以实现灵活迁移，无需硬编码路径

4. 确保 Markdown 结构完全正确

必须按以下格式生成（不能有任何修改）：

---
excalidraw-plugin: parsed
tags: [excalidraw]
---
==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠== You can decompress Drawing data with the command palette: 'Decompress current Excalidraw file'. For more info check in plugin settings under 'Saving'

# Excalidraw Data

## Text Elements
%%
## Drawing
\`\`\`json
{完整的 JSON 数据}
\`\`\`
%%

5. JSON 数据要求

包含完整的 Excalidraw JSON 结构
所有文本元素使用 fontFamily: 5
文本中的 " 替换为 『』
文本中的 () 替换为 「」
JSON 格式必须有效，通过语法检查
所有元素有唯一的 id
包含 appState 和 files: {} 字段

6. 用户反馈与确认

向用户报告：

图表已生成
精确的保存位置
如何在 Obsidian 中查看
图表的设计选择说明（选择了什么类型的图表、为什么）
是否需要调整或修改

Example Output Messages

Obsidian 模式：

Excalidraw 图已生成！

保存位置：商业模式.relationship.md

使用方法：
1. 在 Obsidian 中打开此文件
2. 点击右上角 MORE OPTIONS 菜单
3. 选择 Switch to EXCALIDRAW VIEW

Standard 模式：

Excalidraw 图已生成！

保存位置：商业模式.relationship.excalidraw

使用方法：
1. 打开 https://excalidraw.com
2. 点击左上角菜单 → Open → 选择此文件
3. 或直接拖拽文件到 excalidraw.com 页面

Animated 模式：

Excalidraw 动画图已生成！

保存位置：商业模式.relationship.animate.excalidraw

动画顺序：标题(1) → 主框架(2-4) → 连接线(5-7) → 说明文字(8-10)

生成动画：
1. 打开 https://dai-shi.github.io/excalidraw-animate/
2. 点击 Load File 选择此文件
3. 预览动画效果
4. 点击 Export 导出 SVG 或 WebM

Install command

One-click installPick a runner, click Copy, paste into your terminal, press enter

npx skills add axtonliu/axton-obsidian-visual-skills/excalidraw-diagram -y

Open general install guide

View skill source

Works with

Claude Code
Cursor
Cline
Codex
Windsurf
Gemini
OpenCode
Roo Code
AAide
+Augment
GitHub Copilot
OpenClaw
KKiro
Junie
WWarp
Goose
Trae
Kilo Code
OpenHands
Amp
Zencoder
CContinue
AIAider
CodeBuddy
CodeGeeX
Replit Agent

Security audit

88 / 100

Community

未声明 license/许可。
未声明 version。
未限定 allowed-tools，默认拥有全部工具权限。

Metadata

Source: github
axtonliu/axton-obsidian-visual-skills
中文

Category & tags

Category Productivity