Back to Details

obsidian-canvas-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Obsidian Canvas Creator

Obsidian Canvas 文件创建工具

Transform text content into structured Obsidian Canvas files with support for MindMap and freeform layouts.
将文本内容转换为结构化的Obsidian Canvas文件，支持思维导图和自由形式两种布局。

When to Use This Skill

何时使用此功能

  • User requests to create a canvas, mind map, or visual diagram from text
  • User wants to organize information spatially
  • User mentions "Obsidian Canvas" or similar visualization tools
  • Converting structured content (articles, notes, outlines) into visual format
  • 用户要求从文本创建画布、思维导图或可视化图表
  • 用户希望在空间上组织信息
  • 用户提及"Obsidian Canvas"或类似可视化工具
  • 将结构化内容（文章、笔记、大纲）转换为可视化格式

Core Workflow

核心工作流程

1. Analyze Content

1. 内容分析

Read and understand the input content:
  • Identify main topics and hierarchical relationships
  • Extract key points, facts, and supporting details
  • Note any existing structure (headings, lists, sections)
读取并理解输入内容：
  • 识别主题和层级关系
  • 提取关键点、事实和支撑细节
  • 记录现有结构（标题、列表、章节）

2. Determine Layout Type

2. 确定布局类型

Ask user to choose or infer from context:
MindMap Layout:
  • Radial structure from center
  • Parent-child relationships
  • Clear hierarchy
  • Good for: brainstorming, topic exploration, hierarchical content
Freeform Layout:
  • Custom positioning
  • Flexible relationships
  • Multiple connection types
  • Good for: complex networks, non-hierarchical content, custom arrangements
询问用户选择或根据上下文推断：
思维导图布局：
  • 从中心向外辐射的结构
  • 父-子关系清晰
  • 层级明确
  • 适用场景：头脑风暴、主题探索、层级化内容
自由形式布局：
  • 自定义定位
  • 灵活的关系设置
  • 多种连接类型
  • 适用场景：复杂网络、非层级化内容、自定义排列

3. Plan Structure

3. 规划结构

For MindMap:
  • Identify central concept (root node)
  • Map primary branches (main topics)
  • Organize secondary branches (subtopics)
  • Position leaf nodes (details)
For Freeform:
  • Group related concepts
  • Identify connection patterns
  • Plan spatial zones
  • Consider visual flow
针对思维导图：
  • 确定核心概念（根节点）
  • 梳理主分支（主题）
  • 组织次级分支（子主题）
  • 定位叶节点（细节内容）
针对自由形式：
  • 对相关概念进行分组
  • 识别关联模式
  • 规划空间区域
  • 考虑视觉流向

4. Generate Canvas

4. 生成画布

Create JSON following the Canvas specification:
Node Creation:
  • Assign unique 8-12 character hex IDs
  • Set appropriate dimensions based on content length
  • Apply consistent color schemes
  • Ensure no coordinate overlaps
Edge Creation:
  • Connect parent-child relationships
  • Use appropriate arrow styles
  • Add labels for complex relationships
  • Choose line styles (straight for hierarchy, curved for cross-references)
Grouping (Optional):
  • Create visual containers for related nodes
  • Use subtle background colors
  • Add descriptive labels
按照Canvas规范创建JSON：
节点创建：
  • 分配8-12位唯一十六进制ID
  • 根据内容长度设置合适尺寸
  • 应用统一配色方案
  • 确保坐标无重叠
边创建：
  • 连接父-子关系
  • 使用合适的箭头样式
  • 为复杂关系添加标签
  • 选择线条样式（层级关系用直线，交叉引用用曲线）
分组（可选）：
  • 为相关节点创建可视化容器
  • 使用柔和的背景色
  • 添加描述性标签

5. Apply Layout Algorithm

5. 应用布局算法

MindMap Layout Calculations:
Refer to 
references/layout-algorithms.md
for detailed algorithms. Key principles:
  • Center root at (0, 0)
  • Distribute primary nodes radially
  • Space secondary nodes based on sibling count
  • Maintain minimum spacing: 320px horizontal, 200px vertical
Freeform Layout Principles:
  • Start with logical groupings
  • Position groups with clear separation
  • Connect across groups with curved edges
  • Balance visual weight across canvas
思维导图布局计算：
参考
references/layout-algorithms.md
获取详细算法。核心原则：
  • 根节点居中于(0, 0)
  • 主节点呈辐射状分布
  • 根据同级节点数量设置次级节点间距
  • 保持最小间距：水平320px，垂直200px
自由形式布局原则：
  • 从逻辑分组开始
  • 分组间保持清晰分隔
  • 用曲线连接不同分组
  • 平衡画布整体视觉重量

6. Validate and Output

6. 验证与输出

Before outputting:
Validation Checklist:
  • All nodes have unique IDs
  • No coordinate overlaps (check distance > node dimensions + spacing)
  • All edges reference valid node IDs
  • Groups (if any) have labels
  • Colors use consistent format (hex or preset numbers)
  • JSON is properly escaped (Chinese quotes: 『』 for double, 「」 for single)
Output Format:
  • Complete, valid JSON Canvas file
  • No additional explanation text
  • Directly importable into Obsidian
输出前需完成：
验证清单：
  • 所有节点拥有唯一ID
  • 坐标无重叠（检查距离>节点尺寸+间距）
  • 所有边引用有效的节点ID
  • 分组（若有）均有标签
  • 颜色格式统一（十六进制或预设编号）
  • JSON转义正确（中文引号：双引号用『』，单引号用「」）
输出格式：
  • 完整、有效的JSON Canvas文件
  • 无额外说明文本
  • 可直接导入Obsidian

Node Sizing Guidelines

节点尺寸指南

Text Length-Based Sizing:
  • Short text (<30 chars): 220 × 100 px
  • Medium text (30-60 chars): 260 × 120 px
  • Long text (60-100 chars): 320 × 140 px
  • Very long text (>100 chars): 320 × 180 px
基于文本长度的尺寸设置：
  • 短文本（<30字符）：220 × 100 px
  • 中等文本（30-60字符）：260 × 120 px
  • 长文本（60-100字符）：320 × 140 px
  • 极长文本（>100字符）：320 × 180 px

Color Schemes

配色方案

Preset Colors (Recommended):
  • "1"
    - Red (warnings, important)
  • "2"
    - Orange (action items)
  • "3"
    - Yellow (questions, notes)
  • "4"
    - Green (positive, completed)
  • "5"
    - Cyan (information, details)
  • "6"
    - Purple (concepts, abstract)
Custom Hex Colors: Use for brand consistency or specific themes. Always use uppercase format: 
"#4A90E2"
预设颜色（推荐）：
  • "1"
    - 红色（警告、重要内容）
  • "2"
    - 橙色（行动项）
  • "3"
    - 黄色（问题、备注）
  • "4"
    - 绿色（积极内容、已完成项）
  • "5"
    - 青色（信息、细节）
  • "6"
    - 紫色（概念、抽象内容）
自定义十六进制颜色： 用于品牌一致性或特定主题。请始终使用大写格式：
"#4A90E2"

Critical Rules

关键规则

  1. Quote Handling:
    • Chinese double quotes → 『』
    • Chinese single quotes → 「」
    • English double quotes → 
      \"
  2. ID Generation:
    • 8-12 character random hex strings
    • Must be unique across all nodes and edges
  3. Z-Index Order:
    • Output groups first (bottom layer)
    • Then subgroups
    • Finally text/link nodes (top layer)
  4. Spacing Requirements:
    • Minimum horizontal: 320px between node centers
    • Minimum vertical: 200px between node centers
    • Account for node dimensions when calculating
  5. JSON Structure:
    • Top level contains only 
      nodes
      and 
      edges
      arrays
    • No extra wrapping objects
    • No comments in output
  6. No Emoji:
    • Do not use any Emoji symbols in node text
    • Use color coding or text labels for visual distinction instead
  1. 引号处理：
    • 中文双引号 → 『』
    • 中文单引号 → 「」
    • 英文双引号 → 
      \"
  2. ID生成：
    • 8-12位随机十六进制字符串
    • 所有节点和边的ID必须唯一
  3. Z轴层级顺序：
    • 先输出分组（底层）
    • 然后是子分组
    • 最后是文本/链接节点（顶层）
  4. 间距要求：
    • 节点中心最小水平间距：320px
    • 节点中心最小垂直间距：200px
    • 计算时需考虑节点尺寸
  5. JSON结构：
    • 顶层仅包含
      nodes
      和
      edges
      数组
    • 无额外包裹对象
    • 输出中不得包含注释
  6. 禁止使用表情符号：
    • 节点文本中不得使用任何表情符号
    • 改用颜色编码或文本标签实现视觉区分

Examples

示例

Simple MindMap Request

简单思维导图请求

User: "Create a mind map about solar system planets"
Process:
  1. Identify center: "Solar System"
  2. Primary branches: Inner Planets, Outer Planets, Dwarf Planets
  3. Secondary nodes: Individual planets with key facts
  4. Apply radial layout
  5. Generate JSON with proper spacing
用户："创建一个关于太阳系行星的思维导图"
流程：
  1. 确定中心："太阳系"
  2. 主分支：内行星、外行星、矮行星
  3. 次级节点：各行星及关键事实
  4. 应用辐射状布局
  5. 生成符合间距要求的JSON

Freeform Content Request

自由形式内容请求

User: "Turn this article into a canvas" + [article text]
Process:
  1. Extract article structure (intro, body sections, conclusion)
  2. Identify key concepts and relationships
  3. Group related sections spatially
  4. Connect with labeled edges
  5. Apply freeform layout with clear zones
用户："把这篇文章转换成画布" + [文章文本]
流程：
  1. 提取文章结构（引言、正文章节、结论）
  2. 识别关键概念及关联
  3. 对相关章节进行空间分组
  4. 用带标签的边连接内容
  5. 应用自由形式布局，划分清晰区域

Reference Documents

参考文档

  • Canvas Specification: 
    references/canvas-spec.md
    - Complete JSON Canvas format specification
  • Layout Algorithms: 
    references/layout-algorithms.md
    - Detailed positioning algorithms for both layout types
Load these references when:
  • Need specification details for edge cases
  • Implementing complex layout calculations
  • Troubleshooting validation errors
  • Canvas规范：
    references/canvas-spec.md
    - 完整的JSON Canvas格式规范
  • 布局算法：
    references/layout-algorithms.md
    - 两种布局类型的详细定位算法
在以下场景加载这些参考文档：
  • 需要处理边缘情况的规范细节
  • 实现复杂布局计算
  • 排查验证错误

Tips for Quality Canvases

高质量画布制作技巧

  1. Keep text concise: Each node should be scannable (<2 lines preferred)
  2. Use hierarchy: Group by importance and relationship
  3. Balance the canvas: Distribute nodes to avoid clustering
  4. Strategic colors: Use colors to encode meaning, not just decoration
  5. Meaningful connections: Only add edges that clarify relationships
  6. Test in Obsidian: Verify the output opens correctly
  1. 文本简洁：每个节点内容应易于扫描（建议不超过2行）
  2. 善用层级：按重要性和关系分组
  3. 平衡画布：分散节点避免聚集
  4. 策略性配色：用颜色编码含义，而非仅作装饰
  5. 有意义的连接：仅添加能明确关系的边
  6. 在Obsidian中测试：验证输出能否正常打开

Common Pitfalls to Avoid

需避免的常见陷阱

  • Overlapping nodes (always check distances)
  • Inconsistent quote escaping (breaks JSON parsing)
  • Missing group labels (causes sidebar navigation issues)
  • Too much text in nodes (use file nodes for long content)
  • Duplicate IDs (each must be unique)
  • Unconnected nodes (unless intentional islands)
  • 节点重叠（务必检查间距）
  • 引号转义不一致（会导致JSON解析失败）
  • 缺少分组标签（会导致侧边栏导航问题）
  • 节点文本过多（长内容使用文件节点）
  • ID重复（每个ID必须唯一）
  • 孤立节点（除非是有意设置的独立内容块）