2020年9月18日

Draw.io—跨平台免费作图神器

跨平台作图软件可以分为多种类别:

  • 基于浏览器Web的。如:Draw.io、LucidChart、国内的processon.com等。
  • 跨平台桌面APP。如:Draw.io。
  • 代码生成式跨平台软件。如:graphviz。
  • 桌面App不跨平台。如Windows上的Visio等。

今天推荐的Draw.io是一个跨平台的开源免费作图软件:https://draw.io

跨平台

Draw.io跨多个平台:

  • Web
  • Windows
  • macOS
  • Linux
Draw.io—跨平台免费作图神器

多软件集成

集成了如下平台,可以将信息存储大任意地方。

  • Jira
  • Confluence
  • Dropbox
  • Github
  • Google

易用美观

  • 拖拽
  • 导入自己的图标库
  • 自动布局
  • 丰富模板
  • 支持数学符号
  • 有中文界面
  • 导出多种格式,包括Visio
  • 有JupyterLab插件,方便科学画图
  • 在Linux下可以使用命令行界面来导出,默认与源文件同名
drawio -x -f svg lstm.drawio

赢利模式

draw.io免费使用,又开源,有没坑呢。目前没有,因其主要是其收入来源为与Atlassian的商业合同。普通用户使用等于是有助于其扩大受众。

默认保存的格式

draw.io默认保存的XML格式,2016年由 raw XML 格式改成 XML compressedraw XML格式可以方便地查看元素间的关系,但其压缩文件会增大网络环境下保存成功率。

raw XML:

<mxGraphModel dx="715" dy="643" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#ffffff">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1">
<mxGeometry x="210" y="200" width="120" height="80" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>

XML compressed:

<mxfile userAgent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36" version="8.7.7" editor="www.draw.io" type="device">
<diagram id="9adcf375-e076-04b6-5a1c-1aa6950bf87e" name="Page-1">jZJNc4QgDIZ/DXeFOrN7rd22l5489EwlC0xRHBar9tcXJfgxOztTDw55kkDyJoSVzfjmeKc+rABDaCZGwl4IpQXLwn8GUwRP5yIC6bSIKN9ApX8BIebJXgu4HQK9tcbr7ghr27ZQ+wPjztnhGHa15vhqxyXcgarm5p5+auFVpKci2/g7aKnSy3mGni9ef0tn+xbfI5Rdly+6G57uwvib4sIOO8QuhJXOWh9PzViCmaVNssW81wfetW4Hrf9PAo0JP9z0kCpe6vJT0iIkBNmD8Two7aHqeD17hjD4wJRvTLDycMSrwHkYH5aTr02G3QHbgHdTCBlXIWMK7g09oz1sU8iTdmo3gRMyjoOX69Vb8+GA/Sdz03nx7XaZXf4A</diagram>
</mxfile>

SVG:

http://fancyerii.github.io/2019/03/26/mxgraph/<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="121px" height="81px" version="1.1" content="<mxfile userAgent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36" version="8.7.7" editor="www.draw.io" type="device"><diagram id="fe4de1fa-36fc-a25a-93c3-cc3ffab61653" name="Page-1">jZJNc4QgDIZ/DXeROrO91m67l5489EwlC0xRHBar9tc3CvgxOztTDw55kkDyJoSVzfjueKc+rABD8kyMhL2SPC9Yhv8ZTAE8PRcBSKdFQHQDlf6FCGOe7LWA2yHQW2u87o6wtm0LtT8w7pwdjmFXa46vdlzCHahqbu7ppxZeBXoqso1fQEuVXqZZ9Hzx+ls627fxPZKz6/IFd8PTXTH+priwww6xM2Gls9aHUzOWYGZpk2wh7+2Bd63bQev/k5CHhB9uekgVL3X5KWmBCSg7Gi+D0h6qjtezZ8DBI1O+MWhRPMarwHkYH5ZD1yZxd8A24N2EISkh6Rj3hp6iPWxToEk7tZtAiuNx8HK9emseD7H/ZG46L77dLrPzHw==</diagram></mxfile>" style="background-color: rgb(255, 255, 255);">
<defs/>
<g transform="translate(0.5,0.5)">
<ellipse cx="60" cy="40" rx="60" ry="40" fill="#ffffff" stroke="#000000" pointer-events="none"/>
</g>
</svg>

Draw.io软件信息

Draw.io是由Javascript写成的作图渲染工具,其核心引擎为mxGraph,也是javascript开源,成熟度很高。我们也可以使用mxGraph来做自己的定制作图库。