如果你正在写一些技术文档或者笔记，并需要在其中插入图表或流程图等，那么 PlantUML 和 GitBook 是两个非常好用的工具。而运用这两款工具，你还可以使用一个非常强大的 npm 包，叫做 gitbook-plugin-plantuml-svg。在以下这篇文章中，我将会介绍这个 npm 包的详细使用教程和说明。
了解 PlantUML
PlantUML 是一个文本表示法，可以用一个文本文件描述出各种流程图、类图等并且生成相对应的图表。它是用 Java 实现的，可以跨平台使用，并且支持多种不同的图表风格和格式。
举个例子，下面是一个简单的 PlantUML 描述符:
@startuml Bob -> Alice : Hello Alice -> Bob : Hi! @enduml
这个描述符产生了一个简单的流程图：
更为详细的语法及其他样式的说明可以在它的官方文档网站上找到。
GitBook
GitBook 是另一个非常好用的工具，在 IT 技术文档和笔记领域广受欢迎。它能够把 Markdown 意义的文本自动转化为漂亮的 HTML 和 PDF 文件，并且提供了很多额外方便的特性。例如，你可以为你的页面、段落和代码创建侧边栏、交互式图表等。GitBook 拥有丰富的插件生态圈，其相关文档和小册子也协助你更好地了解这个工具的使用。
gitbook-plugin-plantuml-svg
gitbook-plugin-plantuml-svg 是管理 PlantUML 工具在 GitBook 或其他 Markdown 文档中使用的插件。它运用 PlantUML 技术在文档中生成漂亮的 SVG 格式的图表，而不需要特别编辑或对象模型。
下面是一个流程图样例：
-- -------------------- ---- -------
---------
------
-------------------
-- ------------ ---- -----
-------
---- ----
-----
------
-- ------ ---- ---------
----------
-----------
----------
---------
---- ---------
-- ---------- ---- ------
-----
------------
---- -------
-----
-----------
-----
-----
-------
使用教程
首先，你需要确保已经安装了 GitBook 和 GitBook CLI。如果没有，请查看你的系统安装方法。
安装好 GitBook 后，你需要先创建一个新的 GitBook 项目，并将 gitbook-plugin-plantuml-svg 添加到其插件列表中。
$ gitbook create myproject $ cd myproject $ gitbook install
然后在项目的目录下创建一个名为 book.json 的文件，让其链接到 gitbook-plugin-plantuml-svg 插件。
-- -------------------- ---- -------
-
--------- - -
--------------
--
---------------- -
--------------- -
------ ----------------------------------------
-
-
-在该文件中，我们为插件指定了一个 URL，用于 PlantUML 程序的转义。 默认的 URL 是 “http://www.plantuml.com/plantuml/svg/"，但该 URL 遇到大流量时可能无法快速生成，而修改的话可能需要安装 PlantUML 本地工具包并自行启动。
有了 book.json 文件后，你就可以在 GitBook 里像下面这么使用 PlantUML 代码块：
{% plantuml %}
@startuml
Bob -> Alice : Hello
Alice -> Bob : Hi!
@enduml
{% endplantuml %}代码块中的 PlantUML 如何转义为图表是在 GitBook 发布之前完成的。
结语
正如你在这篇文章中了解到的那样，gitbook-plugin-plantuml-svg 是一个非常强大和实用的 npm 包，它可帮助你在文字和代码方面展现复杂的过程和流程。而且，这个插件使用起来也比较容易，只需要几个简单的步骤就能够上手。希望今后你在写技术文档时可以考虑使用它，同时也欢迎大家在使用中分享经历和发现的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568d681e8991b448e4976