玩转vscode支持PlantUML绘制预览流程图

最新推荐文章于 2024-07-18 13:52:42 发布

zhaoem82

最新推荐文章于 2024-07-18 13:52:42 发布

阅读量1.4w

点赞数 6

分类专栏：工具软件

原文链接：https://blog.csdn.net/u011644231/article/details/104279233

版权

工具软件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

软件设计中，有好几种图需要画，比如流程图、类图、组件图等，我知道大部分人画流程图一般都会用微软的viso绘制，我之前也是这个习惯。

viso画图有个不好的地方是需要时刻去调整线条和边框已达到简洁美观，今天我给大家介绍一款程序员画图神器PlantUML，一款你用了就爱上的画图软件！

VsCode以插件的形式支持了这款画图神器，还不知道VsCode？

VsCode 强大地自定义功能，已经成为程序员最爱编辑器。
Microsoft在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和Linux之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。

该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮(syntax high lighting)，可定制的热键绑定(customizable keyboard bindings)，括号匹配(bracket matching)以及代码片段收集(snippets)。Somasegar 也告诉笔者这款编辑器也拥有对 Git 的开箱即用的支持。引用360百科

主角出场

PlantUML

PlantUML是一个开源项目，支持快速绘制：

时序图
用例图
类图
活动图 (旧版语法在此处)
组件图
状态图
对象图
部署图
定时图
…

同时还支持以下非UML图:

线框图形界面
架构图
规范和描述语言 (SDL)
Ditaa diagram
甘特图
MindMap diagram
以 AsciiMath 或 JLaTeXMath 符号的数学公式

通过简单直观的语言来定义这些示意图,与MarkDown有相似的作用，这两种语言一个主要面向文本渲染一个主要用于图形绘制。

语法

语法简单明了，查看以下官方教程
我截取几个官网的事例图片在这里：

活动图
类图
时序图
用例图
状态图

图中的图片都是用源代码’ ‘写’’ 出来的哦！是不是很cool

PlantUML遇上VsCode

安装

安装graphviz-2.38.msi
安装2个vscode插件:

PlantUML、Graphviz Preview

例子

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

预览

Alt+D

文件格式

.wsd, .pu, .puml, .plantuml, .iuml

如何导出

F1/ctrl+shift+p; PlantUML:导出当前图表；选择导出格式png；导出即可。

好了，这么好用工具赶紧用起来吧！

更多技术分享在我的知乎文章 和公众号 柠檬的编程学堂 专注后台开发编程语言C++/Python/Go学习，分享技术成长干货，记录编程学习感悟，关注后更多学习资料获取方式：

回复 1024 获取我整理的文中C++学习资料电子书；
回复 408 送你我收集的名校计算机专业4门基础课程视频课链接；

公众号二维码

                                </div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-b6c3c6d139.css" rel="stylesheet">
                                            <div class="more-toolbox">
            <div class="left-toolbox">
                <ul class="toolbox-list">
                    
                    <li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#csdnc-thumbsup"></use>
                    </svg><span class="name">点赞</span>
                    <span class="count"></span>
                    </a></li>
                    <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{&quot;mod&quot;:&quot;popu_824&quot;}"><svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-Collection-G"></use>
                    </svg><span class="name">收藏</span></a></li>
                    <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-fenxiang"></use>
                    </svg>分享</a></li>
                    <!--打赏开始-->
                                            <!--打赏结束-->
                                            <li class="tool-item tool-more">
                        <a>
                        <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg>
                        </a>
                        <ul class="more-box">
                            <li class="item"><a class="article-report">文章举报</a></li>
                        </ul>
                    </li>
                                        </ul>
            </div>
                        </div>
        <div class="person-messagebox">
            <div class="left-message"><a href="https://blog.csdn.net/u011644231">
                <img src="https://profile.csdnimg.cn/0/9/D/3_u011644231" class="avatar_pic" username="u011644231">
                                        <img src="https://g.csdnimg.cn/static/user-reg-year/2x/7.png" class="user-years">
                                </a></div>
            <div class="middle-message">
                                    <div class="title"><span class="tit"><a href="https://blog.csdn.net/u011644231" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}" target="_blank">柠檬橙1024</a></span>
                                        </div>
                <div class="text"><span>发布了21 篇原创文章</span> · <span>获赞 5</span> · <span>访问量 9251</span></div>
            </div>
                            <div class="right-message">
                                        <a href="https://im.csdn.net/im/main.html?userName=u011644231" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信
                    </a>
                                                        <a class="btn btn-sm  bt-button personal-watch" data-report-click="{&quot;mod&quot;:&quot;popu_379&quot;}">关注</a>
                                </div>
                        </div>
                </div>