麒麟操作系统 (kylinos) 从入门到精通 - 办公环境- 第二十九篇 Visio替代与流程图绘制

0.基础环境

类别：笔记本
型号：中国长城 UF712
硬件平台：飞腾处理器（ArmV8 指令集）
系统：银河麒麟操作系统 V10 SP1(2203)
关键词：
信创,麒麟系统,linux,PKS,银河麒麟,飞腾,arm64,arm,Visio,BPMN,Drawio,markdown,vscode

1. 需求背景

在windows下面，我们可以使用visio进行想要的图形如架构图，流程图绘制。但Linux下，特别是飞腾环境下，VISIO没有较好的替代品。
目前应用商店下的亿图可能最比较好的替代品，但是需要购买。本文从免费且好用的角度，通过drawio,redhat bpmn editor,typora,visual studio code,mermaid的角度为大家提供一个好的，且免费的解决方案。

2.visio最佳替代drawio

先安装好visual studio code
再在visual studio code中，安装drawio插件

试验的话，在桌面新建一个文件名.drawio的文件，然后再用vscode打开指定文件，效果如下。

3.bpmn与流程图

3.1 vscode插件模式

如图所示，安装bpmn editor(redhat提供)

桌面上新建文件名.bpmn，然后再用vscode打开，效果见下图

3.2 利用markdown与mermaid实现流程图等图的绘制

注：此种方式最适合技术人员，且可以结合GIT做到版本变更管理

3.2.1 利用vscode markdown 绘制流程图

Mermaid
Mermaid lets you create diagrams and visualizations using text and code.
https://mermaid-js.github.io/
https://mermaid.live/
mermaid支持的图类型

在vscode中安装markdown preview mermaid support

装成功，内置的markdown就可以支持图形绘制了。

这里有详细的列表支持
https://mermaid-js.github.io/...
Markdown Preview Mermaid Support 安装这一个就可以充分利用内置的markdown 编辑器了

Vs Code
    Markdown Preview Mermaid Support
    Mermaid Preview
    Mermaid Markdown Syntax Highlighting
    Mermaid Editor
    Mermaid Export
    Markdown PDF
    Preview
    Preview Sequence Diagrams

3.2.2 使用typora

使用typora

下面是免费版，也可以下载arm64的正式版，但对个人来说，免费版本够用了。
https://download.typora.io/li...
上面的链接如果下载不了，可以通过链接: https://pan.baidu.com/s/1wLB1... 提取码: 34wj
或QQ群获取。

4.使用亿图图示

应用市场中直接安装亿图图示即可，免费也够用了。（收费贵了点）

利用drawio、bpmn editor、mermaid很好的解决了我们的需求，但这过程中特别是markdown方式有一定的学习成本，但一旦掌握，画出来的图又标准，还能结合git进行版本控制，对于技术相关的人员来说，是一个特别好的方式。

5.draw.io desktop 解决方案(首选推荐)

draw.io desktop 是一个相对完美的解决方案，虽然官方提供了大部分平台支持，但是唯独没有提供arm linux下的支持。所以只能通过源代码进行构建打包。

5.1 draw.io desktop下载

软件仓库地址：https://github.com/jgraph/dra...
这里面我们可以自己打包，或者直接运行。我这里提供一个编译好的版本，大家可以直接下载直接运行使用
链接：https://pan.baidu.com/s/1NN3S...
提取码：aplq

git clone --recursive -b v20.3.0  https://github.com/jgraph/drawio-desktop.git #下载代码，仅下载v20.3.0的代码
cd drawio-desktop #进入electron build 主目录
npm install #安装依赖
cd drawio/src/main/webapp # 进入draw io主目录
npm install #为draw io安装依赖
#进入drawio-desktop
npm start #运行
npm run release-linux #利用appimage打包,可能也现错误，请检查dist文件夹，是不是有以AppImage扩展名为的二进制文件，如果有就是成功的。

5.2 运行情况

启动

打开visio vsdx

打开vsdx效果如下

6.总结

在对visio的替代中，商业化亿图图示相对比较友好，如果能够花钱买VIP的话，是个不错的选择。
对于不想花钱的，draw.io desktop 开源软件是我推荐大家首选使用的，打开的效率和编辑的效率也很高。推荐使用，本文有编译好的arm版本(draw.io官方除了arm linux其他都提供了)，可以通过链接下载，也可以进QQ群下载，后续会向麒麟软件公司提交让官方加入应用市场供大家下载使用。

麒麟系统专栏：
https://segmentfault.com/blog...
文章发表在SegmentFault
联系邮箱：[email protected]
群：662512340 文章中相关资料均可通过群文件获取或向群主请求协助
发行日志：
20220727 首发
20221010 增加drawio desktop解决方案