sublime markdown环境下画图 (使用Graphviz)配置教程
下载安装Graphviz
官网链接 http://www.graphviz.org/。在下使用的是Windows,安装完成之后把 bin
目录加入环境变量,在CMD
中用dot -V
检验时候安装配置完毕
安装插件
安装插件能够实现预览,然而在windows上安装插件没有什么软用
- GraphvizPreview
- Graphvizer
手动解决
1.下载离线插件 https://github.com/munro/SublimeGraphvizPreview/archive/master.zip
2.打开Preferences -> Packages Settings-> Packages Control -> Settings User,来确认一下installed_packages没有GraphVizPreview。并且增加”remove_orphaned”: false防止Sublime Text 把手动安装的插件包给删除了。
下面是我的配置文件
{"bootstrapped": true,"in_process_packages":[],"installed_packages":["A File Icon","Anaconda","AutoFileName","Boxy Theme","Markdown Extended","Markdown Preview","MarkdownEditing","MarkdownLivePreview","Monokai Extended","Package Control","SideBarEnhancements","SublimeREPL","SublimeTmpl","Table Editor","Terminal"],"remove_orphaned": false,//防止sublime将手动安装的插件删除
}
3.打开Preferences -> Browse Packages…进入到Sublime Text的插件包下Packagas。
4.解压zip文件到Packagas下,并且更改文件夹SublimeGraphvizPreview-master为GraphVizPreview。
5.重启
之后用鼠标选中需要渲染的代码段按
shift+win+g
即可在pdf中查看绘制的图像
语法
1.无向图
graph graphname{a -- b -- c;b -- d;
}
2.有向图
digraph graphname{a -> b -> c;b -> d;
}
3.属性
//DOT语言中,可以对节点和边添加不同的属性。
digraph graphname {
//节点的属性,节点的名称
a [lable = “Foo”];
//节点的属性,节点的形状
b [shape = box];//边的属性,边的颜色
a -> b -> c [color = blue];//边的属性,边的线状
b -> d [style = dotted];
}
4.基本图形
digraph G {
//把图片的尺寸设为4inch * 4inch
size = "4,4";
main [shape = box];
//边的重要程度,默认是1
main->parse [weight = 8];
parse->execute;
//点状线
main->init[style = dotted];
main->cleanup;
//连接了两条线
execute->{make_string;printf}
init->make_string;
//把边的默认颜色设为red
edge [color = red];
main->printf [sytle=bold, label = “100times”];
//节点的名称
make_string [label = “make a\nstring”];
//设置节点的默认属性
node [shape=box,style =filled,color=lightgrey];
execute->compare;
}
5.多边形
digraph G{
a -> b -> c;
b -> d;
/* 形状为多边形,边数为5,外框为3条,颜色为淡蓝,样式为填充 */
a [shape = polygon, sides = 5, peripheries = 3, color = lightblue, style = filled];
/* 形状为多边形,边数为4,角的倾斜度为0.4,内容为hellow world*/
c [shape = polygon, sides = 4, skew = 0.4, label = “hello world”];
/* 形状为倒三角,整体旋转30度 */
d [shape = invtriangle,orientation = 30];
/* 形状为多边形,边数为4,扭曲度为0.7 */
e [shape = polygon, sides = 4, distortion = 0.7];
}
6.数据结构
复杂的标签
digraph structs {
/* 把节点的默认形状设为矩形record,默认的是圆角矩形Mrecord */
node [shape = record];
struct1 [label = “left|middle|right”];
struct2 [label = “one|two”];
struct3 [label = “hello\nworld|{b|{c|d|e}|f}|g|h”];
struct1 -> struct2;
struct1 -> struct3;
}
graph picture {
//这幅图的名字
label = "I love you";
//图名字的位置在bottom,也可以是t
labelloc = b;
//图名字的位置在left,也可以是r
labeljust = l;
edge[decorate = true];
C – D [label = “s1”];
C – E [label = “s2”];
C – F [label = “s3”];
D – E [label = “s4”];
D – F [label = “s5”];
edge[decorate = false, labelfontcolor = blue, fontcolor = red];
C1 – D1 [headlabel = “c1”,taillabel = “d1”,label = “c1 - d1”];
}
行列对齐
digraph html {
rankdir = LR;
{
node[shape = plaintext];
1995 -> 1996 -> 1997 -> 1998 -> 1999 -> 2000 -> 2001;
}
{
node[shape = box, style = filled];
WAR3 -> Xhero -> Footman -> DOTA:
WAR3 -> Battleship;
}
{rank = same; 1996; WAR3;}
{rank = same; 1998; Xhero; Battleship;}
{rank = same; 1999; Footman;}
{rank = same; 2001; DOTA;}
}
二叉树
digraph G {
label = "Binary search tree";
node [shape = record];
A [label = “<f0>|<f1>A|<f2>”];
B [label = “<f0>|<f1>B|<f2>”];
C [label = “<f0>|<f1>C|<f2>”];
D [label = “<f0>|<f1>D|<f2>”];
E [label = “<f0>|<f1>E|<f2>”];
F [label = “<f0>|<f1>F|<f2>”];
G [label = “<f0>|<f1>G|<f2>”];
A:f0 -> B:f1;
A:f2 -> C:f1;
B:f0 -> D:f1;
B:f2 -> E:f1;
C:f0 -> F:f1;
C:f2 -> G:f1;
}
哈希表
digraph G{
nodesep = .05;
rankdir = LR;
node [shape = record,width = .1,height = .1];
node0 [label = “<f0>|<f1>|<f2>|<f3>|<f4>|<f5>|<f6>|”,height = 2.5];
node [width = 1.5];
node1 [label = “{<n>n14|719|<p>}”];
node2 [label = “{<n>a1|805|<p>}”];
node3 [label = “{<n>i9|718|<p>}”];
node4 [label = “{<n>e5|989|<p>}”];
node5 [label = “{<n>t20|959|<p>}”];
node6 [label = “{<n>o15|794|<p>}”];
node7 [label = “{<n>s19|659|<p>}”];
node0:f0 -> node1:n;
node0:f1 -> node2:n;
node0:f2 -> node3:n;
node0:f5 -> node4:n;
node0:f6 -> node5:n;
node2:p -> node6:n;
node4:p -> node7:n;
}
流程图
digraph G{
subgraph cluster0 {
node [style = filled,color = white];
style = filled;
color = lightgrey;
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster1 {
node [style = filled];
b0 -> b1 -> b2 -> b3;
label = “process #2”;
color = blue;
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape = Mdiamond];
end [shape = Msquare];
}
参考
Sublime Text预览Graphviz图
程序员绘图利器 — Graphviz
Sublime Text + Graphviz + Dot = 有向图
感谢简书作者 我的孙女叫小芳
sublime markdown环境下画图 (使用Graphviz)配置教程相关推荐
- Windows 10环境下TensorFlow(gpu版本)配置教程——[图解] [详细版][零基础]
Tensorflow环境下的深度学习框架的配置主要包含以下几步: 0.前言 1.PyCharm的安装步骤: 2.Python的安装步骤: 3.AnaConda的安装步骤: 4.CUDA的安装步骤: 5 ...
- iis7.5 php虚拟站点目录设置,windows2008中IIS7.5环境下 Fastcgi模式PHP配置教程
最近正在熟悉windows主机web环境的搭建,今天又遇到了iis整合php出现500错误的问题,于是网上寻找教程来顺便将问题解决了,这里和大家分享一下. 1.在安装iis时,要选中CGI脚本. 步骤 ...
- 帧中继环境下NBMA模式的配置
帧中继环境下NBMA模式的配置 1. 实验目的: 通过本次的实验,我们可以掌握如下技能 1) 帧中继静态映射及其broadcast参数的含义. 2) NBMA模式下的DR ...
- 实验七:Xen环境下cirrOS的安装配置
实验名称: Xen环境下cirrOS的安装配置 实验环境: 这里的cirrOS和实验六中的busybox的启动方式相同,唯一的区别就是我们使用的cirrOS镜像中,已经包含了根文件系统.内核文件以及r ...
- ubuntu环境下redis的安装配置
ubuntu环境下redis的安装配置 1. 简要介绍 dis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表 ...
- Linux 环境下安装 GitLab 与配置
什么是 GitLab? GitLab 是一个用于仓库管理系统的开源项目,使用 Git 作为代码管理工具,并在此基础上搭建起来的 web 服务. GitLab的功能特点 提供了管理,计划,创建,验证,打 ...
- Linux环境下安装tomcat并配置开机自启
Linux环境下安装tomcat并配置开机自启 1. 将tomcat压缩包复制到Linux中,(这里复制到usr/local/tomcat目录下). 2. 使用tar zxvf apache-tomc ...
- java aarch64_aarch64环境下,搭建并配置服务器tomcat:
aarch64环境下,搭建并配置服务器tomcat: 环境说明及下载相关文件: 1. ARM环境:aarch64开发板 2.JDK安装包: jdk-8u231-linux-arm64-vfp-hflt ...
- OpenVINO之二:Windows环境下OpenVINO安装与配置
OpenVINO系列: OpenVINO之一:OpenVINO概述 OpenVINO之二:Windows环境下OpenVINO安装与配置 OpenVINO之三:Linux环境下OpenVINO安装与配 ...
最新文章
- JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules
- request.getSession()
- 【爬坑】远程连接 MySQL 失败
- HttpWebRequest采集读取网站挂载Cookie的通用方法
- FATFS文件系统框架及源码分析
- java中static{}语句块详解
- request.RequestContextListener
- php向数组前加如指定键的值,PHP array_fill_keys():使用指定的键和值来填充数组
- POJ 1753 位运算+枚举
- 理光m2554进入维修_理光DX2432C,基士得耶6201供墨检测代码,看完马上解决代码故障...
- python中数字的排序
- 得存一波板子了。。。。
- 锐捷自动定时启动,开机自动认证校园网 教程
- R语言︱线性混合模型理论与案例探究(固定效应随机效应)
- 图片边缘出现黑点的问题分析和解决(纹理过滤)
- apk软件去广告 傻瓜教程
- linux log4cxx 静态库,log4cxx的个人实践
- UEFI开发探索97 – EDK2模拟器搭建网络环境
- React Native开发环境配置检测
- 西门子PLC编程软件,最新版本是TIA STEP7 V16,功能更加强大
热门文章
- 人工智能技术在金融风控领域中的应用
- photoshop2021正式版上线,photoshop 2021 mac
- java money_Java Money与Currency API浅谈
- 破解分布式数据库全局死锁难题 GBase 8c引领数据库领域变革
- php赵普,赵普辞职央视主播一年多 自己创办了“东家守艺”
- linux下使用sdkmanage安装sdk
- webx的一些不解解惑
- python代码流星雨_HTML5梦幻之旅——炫丽的流星雨效果实现过程_html5教程技巧
- python导入股票_利用Python将股票代码表导入表格
- GitHub学生认证示范