当前位置:首页 > draw.io教程

从代码生成图表

drawio4年前 (2022-10-21)draw.io教程11

软件文档编写耗时费力,而且很快就会过时。代码优先的图表绘制方法——即在编程过程中用代码或文本描述图表——非常适用于实体模型(SQL 数据库代码)和使用 Mermaid 语法的类描述。

使用我们内置的高级工具自动生成图表或图表组件。

免责声明:我们在下方链接了一些开源项目和工具。我们并非特指这些工具,只是想强调这些实用的代码生成工具唾手可得。

提示:要修改从 Mermaid 生成的现有 SVG“形状”或文本,请双击它以打开“插入”对话框。


来自 SQL 数据库代码的实体形状

在 diagrams.net 中插入 SQL 代码,即可快速轻松地记录现有数据库。每个数据库实体都以实体形状呈现,而不是以 SVG 格式呈现整个图表。

  1. 单击“排列”>“插入”>“高级”>“SQL”

  2. 请在文本字段中粘贴或输入数据库中实体的 SQL 代码。

  3. 点击“插入”生成图表,它将作为“形状”插入到绘图画布中。

现在,根据需要绘制实体之间的关系连接线。

要重新创建实体,您需要先删除现有实体及其连接器,然后插入新的 SQL 代码。


美人鱼语法图

Mermaid不仅可以描述UML图,还可以描述更广泛的图表。它采用类似Markdown的语法,编写起来非常容易,并且受到多个主流平台的支持。

  1. 点击“排列”>“插入”>“美人鱼”

  2. 在大文本框中添加 Mermaid 语法描述。

  3. 点击“插入”,图表将生成并作为“形状”添加到绘图画布上。

GitLab 和 GitHub 都原生支持在其 Markdown 渲染器中使用 Mermaidmermaid标签。Notion 也支持 Mermaid 语法,并将其渲染为页面上的图表。

如果您想将 Mermaid 图表用作更大图表的组成部分,或将其嵌入到其他平台,请将 Mermaid 语法插入.drawio文件中。

使用draw.ioMermaid 语法绘制图表来……

提示: 在 GitHub Markdown 页面中嵌入任何类型的.drawio图表——您不仅限于 Mermaid 图表。

使用第三方扩展程序和 github.dev 在 Visual Studio Code 中 查看、比较和编辑.drawioGitHub 存储库中的图表文件。

提示:目前有很多工具可以直接从你的代码库生成 Mermaid 语法。在 GitHub 上搜索符合你需求的工具,或者编写你自己的解析器,例如这个用 Python 编写的用于解析 Prolog 的解析器