在前端开发中，图表是非常重要的一部分，能够直观地展示数据和信息的关系。本文将介绍一个 npm 包 gatsby-remark-flowchart，它可以帮助我们在 Gatsby 中快速生成漂亮的流程图和时序图。
安装
首先需要安装 Gatsby 环境和 gatsby-remark-flowchart 包：
npm install --save gatsby gatsby-remark-flowchart
使用
接着修改 gatsby-config.js 配置文件，添加 gatsby-remark-flowchart 插件：
-- -------------------- ---- -------
-------------- - -
-------- -
-
-------- ----------------------------
-------- -
-------- -
-
-------- --------------------------
-------- -
--------- ---------------
--
--
--
--
--
--
-其中 cssClass 选项可以自定义流程图的样式类名。接下来添加一个 Markdown 文件，在其中插入流程图：
```flowchart st=>start: 开始 e=>end: 结束 op=>operation: 操作 cond=>condition: 判断 st->op->cond cond(yes)->e cond(no)->op
-- -------------------- ---- ------- -------- -------- ------------------- ------ ----------------------- ------------ -- -- -------------------- ------ ---- -------- -------------- ----------- --- ------ ------- --- ------------ ---------- -- ------- -- -------------- -- ---------------- -- ------------ ------------ ------------
## 总结 npm 包 `gatsby-remark-flowchart` 可以帮助我们在 Gatsby 中快速生成漂亮的流程图和时序图，使用起来很方便。当然，如果想要定制化更多的样式和效果，也可以自己手写 SVG 或者使用类似 `react-flowchart` 这样的组件库。 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/60056be981e8991b448e5a3b) ，转载请注明来源 [https://www.javascriptcn.com/post/60056be981e8991b448e5a3b](https://www.javascriptcn.com/post/60056be981e8991b448e5a3b)