最完整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不仅能提升文档质量，更能培养用结构化思维描述复杂流程的能力。现在就尝试用文本绘制你的第一个流程图吧！
Kimi-K2.5Kimi K2.5 是一款开源的原生多模态智能体模型，它在 Kimi-K2-Base 的基础上，通过对约 15 万亿混合视觉和文本 tokens 进行持续预训练构建而成。该模型将视觉与语言理解、高级智能体能力、即时模式与思考模式，以及对话式与智能体范式无缝融合。Python00- QQwen3-Coder-Next2026年2月4日，正式发布的Qwen3-Coder-Next，一款专为编码智能体和本地开发场景设计的开源语言模型。Python00
xw-cli实现国产算力大模型零门槛部署，一键跑通 Qwen、GLM-4.7、Minimax-2.1、DeepSeek-OCR 等模型Go06
PaddleOCR-VL-1.5PaddleOCR-VL-1.5 是 PaddleOCR-VL 的新一代进阶模型，在 OmniDocBench v1.5 上实现了 94.5% 的全新 state-of-the-art 准确率。 为了严格评估模型在真实物理畸变下的鲁棒性——包括扫描伪影、倾斜、扭曲、屏幕拍摄和光照变化——我们提出了 Real5-OmniDocBench 基准测试集。实验结果表明，该增强模型在新构建的基准测试集上达到了 SOTA 性能。此外，我们通过整合印章识别和文本检测识别（text spotting）任务扩展了模型的能力，同时保持 0.9B 的超紧凑 VLM 规模，具备高效率特性。Python00
KuiklyUI基于KMP技术的高性能、全平台开发框架，具备统一代码库、极致易用性和动态灵活性。 Provide a high-performance, full-platform development framework with unified codebase, ultimate ease of use, and dynamic flexibility. 注意：本仓库为Github仓库镜像，PR或Issue请移步至Github发起，感谢支持！Kotlin07
VLOOKVLOOK™ 是优雅好用的 Typora/Markdown 主题包和增强插件。 VLOOK™ is an elegant and practical THEME PACKAGE × ENHANCEMENT PLUGIN for Typora/Markdown.Less00
项目优选
kernel
docs
pytorch
flutter_flutter
ops-math
kernel
ohos_react_native
nop-entropy
RuoYi-Vue3
agent-studio