当前位置:   article > 正文

VScode通过Graphviz插件和dot文件绘制层次图,导出svg_graphviz vscode 插件

graphviz vscode 插件

1、安装插件

VScode中安装Graphviz Interactive Preview插件,参考

2、创建dot文件

在本地创建一个后缀为dot的文件,如test.dot,并写入以下内容:

digraph testGraph {
    label = "层次图";
    node [shape = square; width = 1; color = "#00000088"; 
        fontcolor = white; style = filled; 
        fontname = "Helvetica,Arial,sans-serif";];
    subgraph level3 {
        rank = same;
        A3
    }    
    subgraph level2 {
        rank = same;
        A2
        B2 [color = purple;]
        C2 [color = red;]
        D2 
        A2 -> B2
        A2 -> C2 -> A2
    }    
    subgraph level1 {
        rank = same
        A1
        B1
        C1
    }
    A3 -> A2 -> A1
    B2 -> B1
    C2 -> C1 -> C2
    D2 -> B1
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

dot文件的语法,参考Graphviz官方API文档

3、预览

点击VScode右上方的预览按钮
在这里插入图片描述
在这里插入图片描述

4、导出svg

在这里插入图片描述

5、切换其他图布局算法

下面给出一些示意图(以快速找到感兴趣的布局效果),具体算法介绍移步Graphviz官网
在这里插入图片描述

5.1 circo布局

在这里插入图片描述

5.2 FDP布局

在这里插入图片描述

5.3 Neato布局

在这里插入图片描述

5.4 Osage布局

在这里插入图片描述

5.5 Patchwork布局

在这里插入图片描述

5.6 Twopi布局

在这里插入图片描述

6、使用C#第三方库生成dot文件

在NuGet中安装DotNetGraph库:
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/865380?site
推荐阅读
相关标签
  

闽ICP备14008679号