Handy Orchard

Mermaid 图表预览

在本地预览限定语法的 Mermaid 流程或时序图,下载实际 SVG。

输入数据

以 flowchart TB/TD/LR/RL/BT 或 sequenceDiagram 开始,每条语句一个节点或 A --> B;标签用 [ ]、( ) 或 { }。时序支持 participant/actor 和消息箭头。

输入更改时会清除旧输出。

结果

输入数据或填入示例,再运行工具。

计算示例

flowchart TB 配合 A[开始] --> B{核对}、B --> C[完成],生成三个相连节点。

sequenceDiagram 加 participant A、participant B 和 A->>B: 你好,生成参与者间消息。

方法

固定 Mermaid 版本采用严格安全设置、纯 SVG 标签和 Dagre 布局解析并绘制已验证子集。

独立渲染器清理 SVG 并添加固定深色背景,不使用远程图片、链接或运行时 CDN。

适用限制

最多 8,000 字符和 100 条语句、60 流程节点或 20 个时序参与者、80 条边/消息,节点标识符限 ASCII。

不支持子图、循环、指令、自定义样式、HTML、交互链接或其他 Mermaid 图形;并非可硬中止的 Worker 渲染。

来源

实际固定上游源代码第三方许可声明

相关工具

节点网络可视分析SVG 路径节点编辑JavaScript 语法树查看

输入数据保留在此设备。只有经您同意的可选浏览量会被统计;计算值、文件、文件名与处理日志不发送至 Analytics。

切换语言时,文本、设置与所选文件会暂存于此设备,恢复后移除;中断的暂存会于后续访问清理。输入与文件不会上传。