「Illustrations」- 插图

问题描述

在编写文档或记录笔记时,我们经常需要添加插图,以更好的解释文字内容;

该笔记将记录:我们常用的插图绘制工具,以及相关问题的解决办法;

常用绘图工具汇总(工具)

Note:当然这不是所有的工具,只是我们日常用到的一些;

TikZiT

TikZiT is a super simple GUI editor for graphs and string diagrams. Its native file format is a subset of PGF/TikZ, which means TikZiT files can be included directly in papers typeset using LaTeX. Pre-built versions are available for systems running Windows, Linux, or macOS. Packages are available for some Linux distributions, or you can build from source.

GraphViz

图解工具,使用 DOT 语言来生成图解。不像平时使用的思维导图工具,在 GraphViz 中,你只负责描述关系,GraphViz 会为你生成合适的图形结构;

Ditaa – DIagrams Through Ascii Art

Ditaa 是一个用 Java 编写的小型命令行工具,可以将使用 ASCII 字符(包含似于/ | -字符的图)绘制的图转换为适当的位图图形。官网中的例子很好的说明了最好的说明了 Ditaa 的作用,也说明了与其他方法相比使用 Ditaa 的好处;

SeqDiag – Sequence Diagram

http://blockdiag.com/en/seqdiag

时序图绘制软件;

Gephi – The Open Graph Viz Platform

Gephi – The Open Graph Viz Platform
Gephi/Features

Gephi,开源的、免费的,用于图形和网络可视化和探索软件,是数据可视化工具;

LaTex

https://www.latex-project.org

文档准备系统。使用纯文本来编写文档;

XMind

只要用在平时的工作当中。大家也基本都在用这东西;
中文首页:https://www.xmind.cn/

Minder

phase1geo/Minder: Mind-mapping application for Elementary OS

LibreOffice Draw

开源 Office 软件 LibreOffice 的 Draw 软件也能绘制图解。类似于 Microsoft Office 的 Visio 软件;

drawio

jgraph/drawio: Source to app.diagrams.net

Mermaid

mermaid-js/mermaid: Generation of diagram and flowchart from text in a similar manner as markdown

yEd

yEd – Wikipedia
yWorks – The Diagramming Experts

Excalidraw

GitHub – excalidraw/excalidraw

Web, NodeJS, Yarn, Sketch

Kroki

Kroki! – Creates diagrams from textual descriptions!

Kroki 提供统一的 API,支持(BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML)),以后将支持 Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, Structurizr, SvgBob, UMLet, Vega, Vega-Lite, WaveDrom… 等等;

VCG(Visualization of Compiler Graphs)

Visualization of Compiler Graphs

场景:图解绘制工具(图解)

人类的创造力真的是太厉害了,任何问题都能创造出解决方案。我们也创造各种各样的图解,用于描述、解决不同的问题。因此我们不能全部梳理,只能梳理出我们用到的图解类型以及对应的工具;

思维导图(Mind mapping)、头脑风暴(Brainstorming)

XMind

网络拓扑图(Network Topology Diagram)

Top 10 Network Diagram, Topology & Mapping Software

我们希望该工具能够兼容多个平台(Windows、macOS、Linux)

# 09/28/2018,Dia:它是图表、图形等等的开源编辑器。支持 UML 静态结构图(类图)、ER 图、网络图等等。图表可以导出为 postscript 和许多其他格式;

# 05/09/2019,LibreOffice Draw:网络拓扑图,我们使用 LibreOffice Draw 进行绘制(除非哪天发现更好的替代品),它有些列的扩展来添加图标。其实 Dia 也可以,但是觉得 LibreOffice 更容易、更丰富;

# 07/31/2021,draw.io:LibreOffice Draw 的使用还是有点繁琐:需要自行导入图标库、需要安装全部套件、无法与 Microsoft Visio 互操作。而 Dia 并不能跨平台,因此多人分享协作会有些问题;现在,我们使用 draw.io (diagrams.net) 的桌面程序,轻量、跨平台、能与其他开源组件互操作;

# 10/14/2021 涉及到网络拓扑细节,比如交换机端口分配,我们:或通过文档进行记录;或在拓扑图中补充描述;

时序图(Sequence diagram)

SeqDiag

个人体验

下面是我们个人的一些看法,并不具有代表性,这些看法通常与个人习惯和需求有关系;

我们非常热衷于纸质图解,唯一不好的地方就是修改和维护麻烦。因此就要使用软件工具来解决维护和修改问题;

09/01/2018

在绘制流程图的时候,我们不想处理流程图的美观,比如色彩、字体、大小、箭头的样式等等。我们希望能够直接表达思路,工具自动帮我们完成布局,美观对我们来说是次要的。这点用 LibreOffice 的 Draw 功能有些困难,因为在那里我们需要兼顾控件的摆放,弄不好还会歪歪扭扭的,进行调整过于浪费时间。在这一点上 Dia 也可以,但是依然不够优秀。虽然 XMind 在这个时候赢过了前两者,但是还不够;

在这一点上,我们选择使用 Graphviz,我们只需要表达思路,它会自动生成图解。我们唯一需要做的就是使用 DOT 语言来表到思路;

09/02/2018 考虑不周。在我们的情景里中,需要对元素进行描述,因此就会由大段的描述性文本。而 Graphviz 通常用于表述元素的关系,元素名通常都不会很长,对于大段文本的显示并不友好。还是使用 XMind 了;

09/03/2018 昨晚还是用 XMind 完成了流程图;

数据可视化工具

DataV、Grafana、Tableua、QuickBI

参考文献

graph、chart、diagram 的区别
Diagram – Wikipedia