最完整flowchart.js教程：零基础掌握流程图DSL语法
你是否还在为绘制流程图而烦恼？使用专业绘图软件需要手动调整图形位置，代码实现又过于复杂。本文将通过flowchart.js这个轻量级流程图工具，让你10分钟内从零掌握文本绘制流程图的技能。读完本文你将能够：用简单文本描述复杂流程、自定义流程图样式、在网页中快速集成动态流程图。
快速入门：5行代码绘制第一个流程图
flowchart.js采用DSL（领域特定语言）语法，通过文本定义节点和连接关系，自动生成SVG格式流程图。核心原理是将文本解析为抽象语法树，再渲染为矢量图形。项目核心解析逻辑位于src/flowchart.parse.js，支持多种节点类型和复杂连接关系。
基础示例
创建HTML文件，引入依赖库并定义流程图文本：
<!DOCTYPE html>
<html>
<body>
<div id="canvas"></div>
<script src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.17.1/dist/flowchart.min.js"></script>
<script>
const code = `
st=>start: 开始
op=>operation: 处理数据
e=>end: 结束
st->op->e
`;
const chart = flowchart.parse(code);
chart.drawSVG('canvas');
</script>
</body>
</html>
上述代码定义了开始节点、操作节点和结束节点，并通过箭头连接形成简单流程。完整示例可参考example/index.html。
核心语法：节点与连接的艺术
节点定义规则
节点定义遵循nodeName=>nodeType: nodeText[|flowstate][:>urlLink]语法，各部分说明如下：
- nodeName：节点变量名，用于连接定义
- nodeType：节点类型，决定节点形状
- nodeText：节点显示文本，支持换行
- flowstate：可选样式状态，如
|current标记当前步骤 - urlLink：可选链接，点击节点跳转
项目提供8种节点类型，每种类型对应不同的视觉样式和行为特性：
开始/结束节点
st=>start: 流程开始
e=>end: 流程结束
开始节点使用start类型，默认显示"Start"文本，渲染为椭圆形；结束节点使用end类型，默认显示"End"文本，同样为椭圆形但边框加粗。源码定义分别位于src/flowchart.symbol.start.js和src/flowchart.symbol.end.js。
操作/输入输出节点
op=>operation: 数据处理
io=>inputoutput: 读取配置
in=>input: 输入参数
out=>output: 输出结果
操作节点（operation）为矩形，用于表示处理步骤；输入输出节点（inputoutput）为平行四边形，用于数据交互操作。还有专门的输入（input）和输出（output）节点，分别渲染为左/右平行四边形。
条件/并行节点
cond=>condition: 条件判断?
para=>parallel: 并行处理
条件节点（condition）为菱形，支持yes/no两个分支；并行节点（parallel）为双矩形，最多支持3个并行路径。条件节点使用示例：
cond(yes)->操作A
cond(no)->操作B
连接定义规则
连接使用->操作符定义节点流向，支持方向控制和路径标注：
// 基础连接
node1->node2->node3
// 带方向控制
node1(bottom)->node2(right)
// 条件分支
cond(yes,right)->操作A
cond(no,bottom)->操作B
// 并行分支
para(path1,top)->任务1
para(path2,right)->任务2
para(path3,bottom)->任务3
方向参数（left/right/top/bottom）控制连接线离开节点的方向，使复杂流程图布局更合理。详细连接语法可参考README.md的"Connections"章节。
高级技巧：自定义与交互
样式定制
通过drawSVG方法的options参数自定义全局样式：
chart.drawSVG('canvas', {
'line-width': 2, // 线条宽度
'line-color': '#333', // 线条颜色
'font-size': 14, // 字体大小
'font-family': 'Arial', // 字体
'fill': '#f9f9f9', // 节点填充色
'symbols': { // 节点类型特定样式
'start': {
'fill': '#4CAF50', // 开始节点绿色填充
'font-color': 'white' // 白色文字
}
},
'flowstate': { // 状态样式
'current': {'fill': '#FFEB3B'} // 当前步骤黄色高亮
}
});
示例中自定义了开始节点的填充色和当前步骤的高亮样式。完整样式选项可参考项目默认配置src/flowchart.defaults.js。
事件交互
为节点添加点击事件：
const code = `
op=>operation: 点击我: $onClick
`;
function onClick(event, node) {
alert('点击了节点: ' + node.key);
}
window.onClick = onClick; // 暴露到全局
const chart = flowchart.parse(code);
chart.drawSVG('canvas');
通过: $functionName语法为节点绑定事件处理函数，实现交互功能。示例代码来自example/index.html的高级演示。
加载外部文件
通过AJAX加载外部流程图定义文件：
// loadFile.html示例
$.ajax({
url: 'test.txt',
dataType: 'text',
success: function(data) {
const chart = flowchart.parse(data);
chart.drawSVG('canvas');
}
});
这种方式适合大型流程图或需要动态加载的场景，完整实现见example/loadFile.html，测试数据文件为example/test.txt。
实战案例：复杂流程的文本表达
条件分支流程
st=>start: 开始
op1=>operation: 检查用户权限
cond=>condition: 有权限?
op2=>operation: 执行操作
op3=>operation: 提示无权限
e=>end: 结束
st->op1->cond
cond(yes)->op2->e
cond(no)->op3->e
上述代码实现了带权限检查的分支流程，条件节点根据不同结果导向不同路径。渲染效果如下：
并行处理流程
st=>start: 开始
para=>parallel: 并行任务
op1=>operation: 数据采集
op2=>operation: 数据分析
op3=>operation: 结果汇总
e=>end: 结束
st->para
para(path1)->op1->op3
para(path2)->op2->op3
op3->e
并行节点允许同时执行多个任务流，适合表示并发处理场景。
项目应用与资源
安装与使用
通过npm安装：
npm install flowchart.js --save
或直接引入CDN资源：
<script src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flowchart.js@1.17.1/dist/flowchart.min.js"></script>
扩展资源
flowchart.js作为轻量级工具，非常适合在文档、博客和小型应用中集成流程图功能。其文本驱动的特性使版本控制和协作编辑变得简单，SVG输出保证了图形在各种设备上的清晰显示。
常见问题与解决方案
中文显示异常
确保HTML文档声明正确的字符集：
<meta charset="UTF-8">
流程图过大超出容器
在drawSVG方法中设置maxWidth参数限制宽度：
chart.drawSVG('canvas', {
maxWidth: 800, // 最大宽度限制
scale: 0.8 // 缩放比例
});
节点样式不生效
检查flowstate定义是否正确，需使用|分隔文本和状态：
op=>operation: 当前步骤|current
总结与展望
flowchart.js通过简洁的文本语法，降低了流程图绘制的门槛，使开发者能专注于流程逻辑而非视觉排版。其核心优势在于：
- 文本驱动：纯文本定义，易于版本控制和协作
- 轻量高效：仅依赖Raphael库，整体体积小
- 高度可定制：支持样式自定义和事件交互
- 跨平台：SVG输出，兼容所有现代浏览器
随着低代码平台的发展，flowchart.js这类文本驱动的可视化工具将在流程建模、自动化脚本等领域发挥更大作用。项目源码托管于https://gitcode.com/gh_mirrors/fl/flowchart.js，欢迎贡献代码或报告问题。
掌握flowchart.js不仅能提升文档质量，更能培养用结构化思维描述复杂流程的能力。现在就尝试用文本绘制你的第一个流程图吧！
相关内容推荐
GLM-5智谱 AI 正式发布 GLM-5，旨在应对复杂系统工程和长时域智能体任务。Jinja00
GLM-5-w4a8GLM-5-w4a8基于混合专家架构，专为复杂系统工程与长周期智能体任务设计。支持单/多节点部署，适配Atlas 800T A3，采用w4a8量化技术，结合vLLM推理优化，高效平衡性能与精度，助力智能应用开发Jinja00
请把这个活动推给顶尖程序员😎本次活动专为懂行的顶尖程序员量身打造，聚焦AtomGit首发开源模型的实际应用与深度测评，拒绝大众化浅层体验，邀请具备扎实技术功底、开源经验或模型测评能力的顶尖开发者，深度参与模型体验、性能测评，通过发布技术帖子、提交测评报告、上传实践项目成果等形式，挖掘模型核心价值，共建AtomGit开源模型生态，彰显顶尖程序员的技术洞察力与实践能力。00
Kimi-K2.5Kimi K2.5 是一款开源的原生多模态智能体模型，它在 Kimi-K2-Base 的基础上，通过对约 15 万亿混合视觉和文本 tokens 进行持续预训练构建而成。该模型将视觉与语言理解、高级智能体能力、即时模式与思考模式，以及对话式与智能体范式无缝融合。Python00
MiniMax-M2.5MiniMax-M2.5开源模型，经数十万复杂环境强化训练，在代码生成、工具调用、办公自动化等经济价值任务中表现卓越。SWE-Bench Verified得分80.2%，Multi-SWE-Bench达51.3%，BrowseComp获76.3%。推理速度比M2.1快37%，与Claude Opus 4.6相当，每小时仅需0.3-1美元，成本仅为同类模型1/10-1/20，为智能应用开发提供高效经济选择。【此简介由AI生成】Python00
Qwen3.5Qwen3.5 昇腾 vLLM 部署教程。Qwen3.5 是 Qwen 系列最新的旗舰多模态模型，采用 MoE（混合专家）架构，在保持强大模型能力的同时显著降低了推理成本。00- RRing-2.5-1TRing-2.5-1T：全球首个基于混合线性注意力架构的开源万亿参数思考模型。Python00
热门内容推荐
最新内容推荐
项目优选
kernel
docs
leetcode
nop-entropy
flutter_flutter
RuoYi-Vue3
gitea
kernel
pytorch
rainbond