用代码编写图表
在源码区写流程图、时序图、类图、甘特图、思维导图等图表，右侧即时显示视觉结果。
SourceCanvas
用 Code 轻松画各种图表
编写流程图、时序图、类图、状态图、ER 图、甘特图、时间线和思维导图等 Mermaid 图表，旁边即时看到结果。SourceCanvas 让用代码画图、学习图表写法、保存源码和导出 PNG/PDF 更自在。
- 边写边看
- 轻松学习多种图表
- Mac、iPad、iPhone、Apple Vision Pro 可用
核心功能
从学习图表写法到完成文档配图，常见的 code 画图动作都放在同一个工作区里完成。
轻松学习 Mermaid 图表
通过可读的源码示例理解节点、连线、参与者、时间线和分组，适合边学边改。
图表类型覆盖完整
支持流程与结构、项目计划、知识整理、数据分析和专用图表等多类图表。
打开与保存源码
支持 .svg、.mmd、.mermaid 文件，图表源码可保存到项目或文档资料中继续维护。
缩放、背景与导出
双指缩放和背景切换方便检查图表细节，预览可导出 PNG 1x、PNG 2x、PNG 3x 或 PDF。
你可以这样使用 SourceCanvas
从学习图表写法到完成文档配图，SourceCanvas 把编写、预览、保存和导出放在一个清晰的工作流里。
从示例开始学习
用流程图、时序图、甘特图、思维导图等常见图表入门，边改源码边理解图表结构。
边写边看结果
源码和预览同屏显示，节点、连线、任务周期和分组改动后可以马上检查。
在不同设备上画图
Mac 适合键盘输入，iPad 和 iPhone 适合触控检查，Apple Vision Pro 适合查看更大的图表。
保存源码或导出图片
完成后可保存 .mmd、.mermaid、.svg 源码，也可导出 PNG 1x、PNG 2x、PNG 3x 或 PDF。
可编写的 Mermaid 图表
SourceCanvas 重点支持把文字代码变成图表。你可以从常见图表入门，再逐步学习更多 Mermaid 图表类型。
流程与结构图
- 流程图 flowchart / graph
- 时序图 sequence diagram
- 类图 class diagram
- 状态图 state diagram
- ER 图 entity relationship
- 需求图 requirement diagram
- C4 架构图
项目与知识图
- 甘特图 Gantt chart
- Git 图 git graph
- 用户旅程图 journey
- 时间线 timeline
- 思维导图 mind map
- 看板 kanban
- 架构图 architecture
- 事件建模图 event modeling
数据与分析图
- 饼图 pie chart
- 象限图 quadrant chart
- XY 图 xychart
- 桑基图 sankey chart
- 雷达图 radar chart
- 树状矩形图 treemap
- 信息图 info diagram
专用图表
- 数据包图 packet diagram
- 块图 block diagram
- 树视图 tree view
- 鱼骨图 Ishikawa
- 维恩图 Venn diagram
- Wardley 图
部分较新的图表写法会随 Mermaid 版本演进；建议从流程图、时序图、甘特图和思维导图开始学习。
用代码画图教程
四个步骤完成图表编写、类型选择、视觉检查和保存导出。下方步骤可点击切换。
写一段图表代码，或打开本地文件
把流程图、时序图、甘特图、思维导图等图表代码写入编辑器。也可以直接打开 .svg、.mmd、.mermaid 文件。
- 适合从示例开始学习 Mermaid 图表。
- 适合维护文档项目里的流程图和架构图。
- macOS 支持拖入文件，iOS / iPadOS / visionOS 使用系统文件入口。
使用 Auto / SVG / Mermaid 模式
默认 Auto 会根据内容和文件后缀识别类型。遇到混合片段或需要强制渲染时，可以手动切换到 SVG 或 Mermaid。
- Auto：适合大多数粘贴和打开文件场景。
- SVG：固定使用 SVG 渲染路径。
- Mermaid：固定使用 Mermaid 图表渲染路径，并显示背景选项。
同屏检查源码与结果
预览区域会显示渲染状态。放大或缩小可检查图形细节，iPhone 与 iPad 上也可直接用双指缩放。
- 使用缩放按钮或双指手势校对细线、节点和文字。
- Mermaid 默认使用纸张背景，也可切换透明、白色、浅蓝和深色。
- 无效输入会给出明确错误反馈，便于快速修正。
保存源码，或导出预览
确认图形正确后，可以把源码保存为对应格式，或将预览导出为 PNG 1x、PNG 2x、PNG 3x 与 PDF，用于文档归档、产品说明和设计评审。
- SVG 源码保存为 .svg。
- Mermaid 源码保存为 .mmd 或 .mermaid。
- iOS 保存与导出都使用系统文件面板，导出保留当前图形和背景设置。
支持平台
同一个预览流程适配桌面、触控屏和空间计算设备，根据屏幕尺寸调整源码与预览布局。
Mac：键盘优先的宽屏工作区
横向屏幕上保持源码与预览并排，适合在开发、文档和设计工具之间快速校对。
iPad：并排源码与预览工作区
去掉左侧工具列后，顶部命令区和并排编辑/预览布局更适合横屏检查 SVG 图标与 Mermaid 图表。
iPhone：三行工具栏与双指缩放
窄屏下源码与预览上下排列，打开/保存保留图标入口，模式、背景、缩放分行呈现。
Apple Vision Pro：空间窗口中的大图检查
适合把图表和文档放在更大的工作空间中查看，尤其适合复杂 Mermaid 图表。
适合用 Code 画图与学习图表
SourceCanvas 聚焦图表编辑、Mermaid 图表学习、流程图绘制、文档配图、源码保存和 PNG/PDF 导出。
图表编辑器
用文字代码编写流程图、时序图、类图、甘特图、思维导图和时间线，实时看到图表结果。
学习 Mermaid 图表
从可读示例开始，逐步理解节点、连线、分支、参与者、任务周期和图表结构。
文档写作
把产品流程、系统设计、项目计划和知识结构整理成可维护的图表源码。
SVG 与视觉素材
继续支持 SVG 标记、图标、插图和矢量素材检查，适合和图表工作流放在一起。
PNG/PDF 导出
将完成的图表导出为 PNG 1x、2x、3x 或 PDF，用于文档、评审、课程材料和归档。
常见问题
关于 SVG、Mermaid、文件格式、隐私和导出的快速说明。
SourceCanvas 是免费的吗？
站点展示的是轻量本地预览工具的能力。实际价格和上架状态以 App Store 页面为准。
SourceCanvas 会上传我的文件吗？
应用定位为本地预览工具，核心 SVG 与 Mermaid 渲染不依赖远程渲染服务。最终隐私声明仍应以上架版本和隐私政策为准。
支持哪些文件格式？
支持粘贴 SVG、Mermaid 源码和 Markdown Mermaid 代码块，也支持打开 .svg、.mmd、.mermaid 文件。
Mermaid 背景为什么可以切换？
不同文档和设计场景会使用不同底色。透明、白色、纸张、浅蓝和深色背景能帮助更早发现对比度和边界问题。
导出的 PNG 和 PDF 适合什么场景？
PNG 适合粘贴到文档、工单和聊天工具，PDF 适合归档、评审和保持矢量文档工作流。
iOS 保存和导出有什么变化？
保存源码现在会打开系统文件面板；导出菜单使用 PNG 1x、PNG 2x、PNG 3x 和 PDF，便于按使用场景选择清晰度。
适合团队使用吗？
适合需要快速检查本地素材和图表的团队，尤其是前端开发、设计 QA、产品文档和技术写作流程。