往期回顾
（如果您正巧因为首页推荐的功能点进此文章，由衷地建议您先回顾往期内容，这将有助您接下来的阅读体验。）
前言
在上一篇文章里，我们了解了BPMN基本元素的概念，并亲自动手尝试，遵循流程配置规范，构建了一个简单的审批流程。
在本篇文章中，我们将学习有关 流程编辑器 的内容，我会介绍它的结构、组成它的各部分的功能，通俗地来说，本篇文章帮助大家解决👇这样一个问题👇：
“什么” 是什么，“什么” 怎么用。
（P.S. 本文是本系列文章的第二篇，因此重心还是在于理论知识的铺垫，大家比较关心的 动手写代码 的内容，将会在第三篇以及后续文章出现，敬请期待~）
话不多说，让我们直接进入正题吧~
总览说明
这里我将以原始的流程设计器作为介绍的对象，细心的掘友可能会发现展示的样子和第一篇里展示的样子有出入，这是因为bpmn-js支持我们对它的二次改造，可以做很多个性化的定制，涉及到很多代码上的修改，考虑到知识接收的循序渐进，因此我们先从最原始的状态来介绍。
组件结构
Palette(左侧工具栏)
提供了一系列的可交互的图形元素和工具，这些元素和工具可以用于在 BPMN 图表中创建新的流程元素。palette 类似于其他图形编辑工具中的工具栏，但它提供的是与 BPMN 相关的图元。我们可以看到在工具栏中，有一道“——”将其分隔成了上下两个部分，上半部分是工具，如：
Activate the hand tool: 激活抓手工具Activate the lasso tool: 激活套索工具Activate the create/remove space tool: 激活创建/删除空间工具Activate the global connect tool: 激活全局连接工具
下半部分是图元，如：
Create StartEvent: 创建开始事件Create IntermediateThrowEvent/BoundaryEvent: 创建中间抛出事件/边界事件Create EndEvent: 创建结束事件Create Gateway: 创建网关Create Task: 创建任务Create Expanded Sub-Process: 创建扩展的子流程Create Data Object Reference: 创建数据对象引用Create Data Store Reference: 创建数据库引用Create Pool/Participants: 创建 池/参与者Create Group: 创建组
鼠标悬浮在图标上，会显示相关的描述，比如将鼠标悬浮在「开始事件」上，显示了“Create Start Event”。
鼠标点击图标后，移动鼠标，会发现鼠标的光标变成了BPMN元素的样子
确定好合适的位置后，点击鼠标，则会在鼠标所在的坐标处，创建对应的BPMN元素。
Context-pad（元素悬浮窗）
鼠标单击位于画布上的元素，会展示 元素悬浮窗 ，我们可以通过此窗口，做一下便捷的操作：
-
添加新元素:
- 可以从
context-pad中添加新的元素到流程图中，例如添加新的活动、事件、网关等。
- 可以从
-
删除元素:
- 从
context-pad中删除所选元素。
- 从
-
连接元素:
- 从
context-pad中添加新的流程线（Sequence Flow）来连接两个元素。
- 从
Properties-panel（右侧属性栏）
用于显示和编辑 BPMN 元素属性的面板。当用户在流程图中选择一个元素时，Properties-panel 会自动出现，显示所选元素的属性列表，以此查看元素的详细信息。
还可以通过这个面板来编辑元素的属性：
结语
本系列的第一篇文章和第二篇文章罗列了技术栈的概念，介绍了什么是流程图，一张规范的流程图里都有哪些元素，配置流程图的编辑器都具备哪些功能，以及如何使用流程编辑器去配置一张流程图。
主要目的是为从来没接触过bpmn-js的同学建立认知基础。那么接下来就要往技术实现的方向上进行讨论了。
Palette在目前业务上用不到那么多图元，为了避免用户误操作，可否删除左侧工具栏的部分图元？Properties-panel属性栏的样式不好看，期望修改成设计师给的设计稿的样子，是否能够支持？- 配置完毕后的流程图如何生效，前后端的约定是什么？
- 为了方便配置，节省时间，期望在画布中能够具备默认的简易流程，如何导入？
那么，就让我们带着这些问题，在本系列的后续文章中再见吧~
