10分钟上手flowchart.js：从文本到专业流程图的超简单指南

2026-02-04 04:30:41作者：温艾琴Wonderful

你是否还在为绘制流程图浪费数小时？用专业工具排版对齐，却在修改时牵一发而动全身？本文将带你用flowchart.js实现"文本即图表"，10分钟掌握从代码到流程图的全流程，让技术文档和项目汇报的流程图从此自动化生成！

读完本文你将获得：

3分钟搭建可直接运行的流程图环境
8种核心流程图节点的快速应用指南
从简单线性流程到复杂分支的实战案例
自定义样式让图表颜值翻倍的技巧

快速开始：3步绘制你的第一个流程图

1. 准备HTML基础文件

创建一个HTML文件，引入必要的依赖库。flowchart.js需要Raphaël（矢量图形库）支持，我们使用国内CDN确保访问速度：

<!DOCTYPE html>
<html>
<head>
  <title>flowchart.js快速入门</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/flowchart/1.17.1/flowchart.min.js"></script>
</head>
<body>
  <div id="diagram"></div>
  <script>
    // 流程图代码将在这里编写
  </script>
</body>
</html>

项目中示例文件参考：example/index.html

2. 编写流程图定义

在<script>标签中添加流程图定义，包含节点定义和连接关系：

const code = `
st=>start: 开始
op=>operation: 处理数据
cond=>condition: 数据有效?
e=>end: 结束

st->op->cond
cond(yes)->e
cond(no)->op
`;

// 解析并渲染流程图
const chart = flowchart.parse(code);
chart.drawSVG('diagram', {
  'line-width': 2,
  'font-size': 14,
  'font-family': 'Microsoft YaHei'
});

3. 用浏览器打开查看结果

用浏览器打开HTML文件，你将看到一个包含开始、处理、条件判断和结束节点的完整流程图。点击条件判断的"yes"会直接结束流程，"no"则返回重新处理数据。

核心节点类型全解析

flowchart.js提供8种节点类型，覆盖流程图的所有基本需求。每个节点通过nodeName=>nodeType: nodeText格式定义：

基础流程节点

开始节点(Start)

st=>start: 流程开始

结束节点(End)

e=>end: 流程结束

操作节点(Operation)

op=>operation: 执行操作

数据处理节点

输入节点(Input)

in=>input: 输入数据

输出节点(Output)

out=>output: 输出结果

输入输出节点(InputOutput)

io=>inputoutput: 数据转换

控制结构节点

条件判断节点(Condition)

cond=>condition: 是否继续?

并行节点(Parallel)

para=>parallel: 并行处理

节点类型定义源码：src/flowchart.symbol.js

连接关系与流向控制

流程图的强大之处在于节点间的连接关系定义，flowchart.js提供灵活的连接语法：

基础连接

使用->操作符定义节点间的顺序关系：

st=>start: 开始
op1=>operation: 第一步
op2=>operation: 第二步
e=>end: 结束

st->op1->op2->e

条件分支

条件节点需要指定"yes"或"no"分支：

cond=>condition: 条件判断
a=>operation: 分支A
b=>operation: 分支B

cond(yes)->a
cond(no)->b

方向控制

可以指定连接的方向（left/right/top/bottom）：

sub=>subroutine: 子流程

// 从右侧输出
sub(right)->op

并行流程

并行节点支持path1/path2/path3三个分支：

para=>parallel: 并行任务

para(path1)->task1
para(path2)->task2
para(path3)->task3

实战案例：用户注册流程

让我们通过一个完整案例巩固所学知识，实现一个用户注册流程的流程图：

st=>start: 开始注册
in1=>input: 输入用户名
cond1=>condition: 用户名可用?
in2=>input: 输入密码
cond2=>condition: 密码符合要求?
in3=>input: 输入邮箱
cond3=>condition: 邮箱已注册?
op=>operation: 创建用户账号
e=>end: 注册成功

st->in1->cond1
cond1(no)->in1
cond1(yes)->in2->cond2
cond2(no)->in2
cond2(yes)->in3->cond3
cond3(yes)->in3
cond3(no)->op->e

这个流程包含：

用户名输入与可用性检查
密码输入与复杂度验证
邮箱输入与唯一性检查
最终创建用户账号

所有输入都有验证环节，只有全部通过才能完成注册。

样式自定义与高级功能

flowchart.js提供丰富的样式自定义选项，让你的流程图更具个性化：

基本样式设置

在drawSVG方法中传入配置对象：

chart.drawSVG('diagram', {
  'line-width': 3,          // 线条宽度
  'line-color': '#333',     // 线条颜色
  'font-size': 14,          // 字体大小
  'font-family': 'Arial',   // 字体
  'fill': '#f8f8f8',        // 节点填充色
  'element-color': '#666',  // 节点边框色
  'arrow-end': 'block'      // 箭头样式
});

节点状态定制

通过flowstate定义不同状态的节点样式：

chart.drawSVG('diagram', {
  'flowstate': {
    'past': { 'fill': '#CCCCCC' },       // 已完成
    'current': { 'fill': '#FFEB3B' },    // 当前步骤
    'future': { 'fill': '#E3F2FD' }      // 未来步骤
  }
});