Graphviz - 像markdown一样用语法画导图

Graph Visualization 是AT&T公司开发的一款开源的绘图编程语言.

叫做dot语言.

官网

它可以绘制UML图. 比如思维导图什么的.

语法有多简单呢: 我觉得比md还要简单.事实上,到现在我也记不住md的语法.

digraph g { a -> {b->c} }

就可以自动生成一个结构图,还可以导出为svg图片. (一种解释型矢量图片,可以在浏览器中正常显示)

gv

使用上,你可以下载它的解释库, 但是我推荐用vscode, 安装Graphviz (dot) language support for Visual Studio Code 扩展.

就是可以像md一样, 左侧写代码, 右侧预览了.

Snipaste_2019-05-06_14-39-45

1 Like
digraph g {
    rankdir=LR  //方向左右
    dot语言->{简介,语法,示例}
    dot语言[shape=box,fontcolor=red]
    简介[color=red]
    语法[color=green]
    示例[color=blue]
    

    简介->{开源免费,UML绘图,导出svg}
    
    语法->{"digraph","graph"}

    "digraph"->导向图[label=可以制作带方向的导图]
    "graph"->无向图[label=可以制作不带方向的导图]

    


    
    
    }

始终学不会 Graphviz,小恐龙老师可以出个教程吗

说 Graph Visualization 还一时想不起来,看到 dot 语言才想起是 Graphviz :sweat_smile:

dot 语言入门不难啊,像小恐龙举的例子 digraph g { a -> {b->c} }
也可以不用嵌套,用最原始的方法来写:

digraph g {
    a -> b
    b -> c
    a -> c
}
1 Like

好赞

(建议移除发现频道,不然没法在主页上看到)

但是,有个分类不是一件很酷的事情么?

1 Like

默认的名字就行哈

已经有了: https://meta.appinn.com/c/app/xiaokonglong

对了,可自定义颜色、背景什么的,有需求告诉我

我才注意到,这货居然是 AT&T 的啊

与其类似的plantuml最近支持画脑图了

嗯,做脑图的话,这个比dot更简单.
plantuml支持的图形种类更多, 而且有中文帮助.

不过我看了一下语法, 感觉更随性一些, 跟dot比, 这个像vbs, dot像js的感觉.

但是plantuml居然还兼容dot.

另外比较别扭的是,plantuml必须安装java环境.

附楼上脑图的代码大家比较下:

@startmindmap
+ OS
++ Ubuntu
+++ Linux Mint
+++ Kubuntu
+++ Lubuntu
+++ KDE Neon
++ LMDE
++ SolydXK
++ SteamOS
++ Raspbian
-- Windows 95
-- Windows 98
-- Windows NT
--- Windows 8
--- Windows 10
@endmindmap

取消了这个主题的自动关闭,好的内容,值得长期讨论

说起来,这个帖子名不副实,居然还有更多md也能画图.

# mermaid

它就是一个markdown软件. 它的画图语法是这样的:

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end

128249-a6fcfff9b08d5bbb

但是呢, 我总觉得现在md语法有些太分散了,衍生版本太多,不同软件的支持度也不太一样.
自从 John Gruber 发明md以来, 它的发展基本上属于民间自发行为, 缺乏强制统一的规范.

而且不同的软件,渲染的效果也不一致. 虽然个性化十足,但是显然并不利于分享.

所以,对于md软件来说, 我还真是接受不能.

如果有人用 typora 的话. typora 跟这个倒是兼容的.

md 我就认最基础的语法,可以直接看原文,渲染与否影响不大。
而表格和画图,看原文就是一堆字符或者一串代码,还不如插图片。

另外还有 Wavedrom ,这个画出来的时序图真是漂亮,可惜现在不用这方面的东西。
image

{signal: [
  {name: 'clk', wave: 'p.....|...'},
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
]}

以及 Flowchart.js 画流程图的
image

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

另外还有Latex语法的 MathJax 虽然不是画图而是公式,但功能类型差不多,都是代码生成类图片
image

When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

为什么知道这些呢,因为这些都被vnote支持。。。我是从vnote的插件菜单里知道这些东西的

说个更有名的:CAD :rofl:

居然有这么多轮子…

感觉这些需要手输代码的东西很难看到有软件门户宣传,所以对大众来说一直是隐藏在帷幕后的。。。也就是markdown火了以后这些东西的曝光度才高了一点点,才被我所知。这些东西不一定有标准化的画图软件好用,但是好在不用打开多个软件,直接在笔记里调用即可,笔记和图结合得比较好。

主要是…写代码对于99%的人来说,太难用了。