将PlantUML文本转为svg

1.起因

事情的起因是我觉得语雀的plantUML在线渲染非常好用,直接给的是svg矢量图,不会影响分辨率,不想idea的plantUML插件,只能导出png,画质模糊,所以我就想自己写一个接口,随时都可以导出svg的plantUML图.

2.开干

曾几何时,我们都是先百度谷歌一顿操作,然后一顿代码复制修改来实现,但是这个功能太冷门啦,百度谷歌也不容易找到代码可以直接使用,于是我们肯定是问下ChatGPT.

我:你知道语雀吗

gpt:是的，语雀是一款在线文档协作工具，类似于国外的 Notion 或 Confluence。它可

我:那你知道它支持plantUML文本绘图吗

gpt:是的，我知道。语雀支持使用PlantUML文本绘图功能。您可以在语雀中编写PlantUML文

我:那你知道它支持plantUML文本绘图的原理是什么?浏览器前端页面用了什么技术,引入了什么第三方库

gpt:我不确定具体的实现细节，但是根据我所知道的，通常在前端页面中，支持PlantUML文本绘图的方式是通过将PlantUML代码转换为SVG或者PNG格式的图片，然后将这些图片插入到页面中。在语雀中，我猜测可能使用了类似的方法。具体实现可能涉及一些技术，比如： PlantUML库：PlantUML是一个开源的绘制UML图表的工具，可以通过输入简单的文本描述来生成各种类型的UML图表，包括类图、时序图等等。 PlantUML渲染器：在语雀中，可能会使用一个PlantUML渲染器，将输入的PlantUML代码转换为图片格式。浏览器技术：在前端页面中，通常可以使用HTML和CSS来布局和渲染页面元素，以及JavaScript来实现页面的交互功能。在语雀中，可能使用了类似的技术来展示转换后的图片。总之，支持PlantUML文本绘图的具体实现可能涉及多种技术和工具，具体实现方式可能因不同的平台、框架和库而有所不同。

大致知道了怎么回事,先抓个语雀的包看看:

果然,的确是调用了后端一个接口来获取svg,chatgpt说的是对的,于是我让他给我实现一个接口具体的要求是这样的:

我:使用springboot2.3的maven项目实现一下这个功能,给出代码: 1.入参传入plantuml代码 2.程序将plantuml代码转为svg图像的xml然后输出直接给我代码就行了,不要废话

整理后得到:

ByteArrayOutputStream os = new ByteArrayOutputStream();
        SourceStringReader reader = new SourceStringReader("@startuml\n" +
                "title 信用卡跑批逻辑\n" +
                "start\n" +
                ":开启数据库事务;\n" +
                ":通过卡号获取信用账户对象(写锁);\n" +
                ":检查该账户当天是否已经跑批;\n" +
                "note right\n" +
                "表中会有上一次\n" +
                "跑批时间的字段哈哈哈哈啊哈哈哈哈哈哈哈哈\n" +
                "end note\n" +
                "stop\n" +
                "@enduml");
        try {
            DiagramDescription description = reader.outputImage(os, new FileFormatOption(FileFormat.SVG));
            os.close();
            System.out.println(os.toString("UTF-8"));
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

引入的依赖:

    compile 'net.sourceforge.plantuml:plantuml:1.2022.14'

已经测试过了,可以使用,非常nice!

本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名,转载请标明出处
最后编辑时间为: 2023/04/18 16:44