在前端项目中使用 UML 图表可以帮助我们更好地理解系统设计,但是手动维护这些图表是非常繁琐的。幸运的是,pumlvisor 是一个 npm 包,可以自动生成 PlantUML 图表,以简化这个过程。本文将为您详细介绍如何使用 pumlvisor 。
安装 pumlvisor
首先,我们需要安装 pumlvisor :
npm install -g pumlvisor
安装完成后,您可以在命令行输入以下命令,以确认 pumlvisor 是否成功安装:
pumlvisor -v
使用 pumlvisor
pumlvisor 的使用非常简单。首先,您需要在项目的根目录下创建一个名为 puml
的文件夹。接下来,您可以将说明文件以 .md
的格式写在项目中。假设我们已经有了一个名为 example.md
的文件,并且它包含了以下的文本:
# Example 这是一个 UML 的例子: ```puml @startuml ClassA <|-- ClassB @enduml
这是另一个例子:
@startuml ClassC --|> ClassD @enduml
在我们的项目根目录运行以下命令: ```shell pumlvisor generate
pumlvisor 将会扫描您项目中的 puml
文件夹,自动检索所有 .md
文件的代码块,并生成对应的 PlantUML 图表。生成的图表将默认输出到 puml/out
文件夹中。
如果您想将图片输出到其他文件夹中,可以使用以下命令:
pumlvisor generate -o ./path/to/output
更多设置
pumlvisor 还提供了许多自定义选项,使您能够根据需要更改输出。例如,您可以为实体类选择图标风格,如下所示:
-- -------------------- ---- ------- --------- ------- ------- ------------------------------------------------------- ------- -------- -- ------- ---------- ------- --------- --- --- ---- ---- --- ----- ---- --- -------------- ---- --- --------------- ------- ----- ---- -- ---------- -- ------- ----- ----- -- ---------- -- ------- ----- -------------- -- ---------- -- ------- ----- --------------- -- ---------- -- ---- -- -------------- ------ --- --- ---------------- --- ------- ----------------- --- ------- -------
您可以在项目的 .puml
文件中添加此设置,以更改图块风格。更多关于自定义的设置可以查看 pumlvisor 的官方文档。
结论
通过 pumlvisor,我们可以自动生成 PlantUML 图表。在我们的 UML 图示概念中,pumlvisor 可以简化设计过程并节省时间。pumlvisor 的自定义设置还能让我们更好的控制图表风格以及输出位置。我们希望这篇文章可以准确地帮助您进行 pumlvisor 的安装和配置,以及实现它在项目中的应用。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055d8d81e8991b448db4eb