文本到图表API，编辑器【超级图表】使用手册
# 超级图表使用指南## 简介
UltraDebug [超级调试编辑器](https://api.qingjue.cn/) 是一款能**将特定语法文本显示为图表**的插件，目前支持`Graphviz`，`Asymptote`， `思维导图`，`Ditaa`，`Gnuplot`，`二维码`，`Message Sequence Chart`，`blockdiag`，`雷达图`，`图书封面`等类型的图表。插件具有以下特点：
1. 图形描述语言的代码存放于UltraDebug_API独立服务器，图片通过远程接口生成并存储在远程服务器。网站互不影响
2. 支持其它网站共用UltraDebug_API，方法及调用API使用GET或者POST带参数，API地址：https://api.qingjue.cn/api.php
3. 提供可选的 **可视化编辑器** （(https://api.qingjue.cn/)），可自行在发帖页，选择Exp工具组，选择超级图标编辑器
## 基本语法
基本语法
~~~
图形描述代码
~~~
另外，Markdown插件也支持使用超级图表，语法如下：
~~~
```plot:画图引擎 输出格式
图形描述代码
```
~~~
## 画图引擎列表
| 引擎代码 | 名称 | 说明 |
| ------------------------------------------- | ---------------------------- | --------------------------------------------- |
| gv:(dot,neato,fdp,sfdp,twopi,circo) | Graphviz | 用于绘制DOT语言脚本描述的图形 |
| asy | Asymptote | 矢量绘图语言 |
| blockdiag | Blockdiag | 类似dot语言的一种绘制流程图的工具 |
| cover(:ten) | 图书封面 | 用于生成图书封面 |
| ditaa | DIagrams Through Ascii Art | 由Ascii Art生成图片的工具 |
| gnuplot | gnuplot | 绘图工具 |
| markdown:(dot,neato,fdp,sfdp,twopi,circo) | Markdown思维导图 | 将Markdown转为dot语言用graphviz生成思维导图 |
| msc | Message Sequence Chart | 类似dot的一种生成消息序列图的工具 |
| qr | 二维码 | 生成给定字符串的二维码图片 |
| radar | 雷达图 | 从csv格式文本生成雷达图 |
## 实例
以下示例将使用Markdown语法，直接使用超级图表时使用``标签即可。
### Graphviz
~~~
```plot:gv:dot svg
digraph finite_state_machine {
rankdir=LR;
size="8,5"
node ; LR_0 LR_3 LR_4 LR_8;
node ;
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}
```
~~~
```plot:gv:dot png
digraph finite_state_machine {
rankdir=LR;
size="8,5"
node ; LR_0 LR_3 LR_4 LR_8;
node ;
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}
```
### Asymptote矢量绘图
~~~
```plot:asy
import math;
import graph;
size(0,400);
real f(real t) {return 2*cos(t);}
pair F(real x) {return (x,f(x));}
draw(polargraph(f,0,pi,operator ..));
defaultpen(fontsize(20pt));
xaxis("$x$");
yaxis("$y$");
real theta=radians(50);
real r=f(theta);
draw("$\theta$",arc((0,0),0.5,0,degrees(theta)),red,Arrow,PenMargins);
pair z=polar(r,theta);
draw(z--(z.x,0),dotted+red);
draw((0,0)--(z.x,0),dotted+red);
label("$r\cos\theta$",(0.5*z.x,0),0.5*S,red);
label("$r\sin\theta$",(z.x,0.5*z.y),0.5*E,red);
dot("$(x,y)$",z,N);
draw("r",(0,0)--z,0.5*unit(z)*I,blue,Arrow,DotMargin);
dot("$(a,0)$",(1,0),NE);
dot("$(2a,0)$",(2,0),NE);
```
~~~
```plot:asy
import math;
import graph;
size(0,400);
real f(real t) {return 2*cos(t);}
pair F(real x) {return (x,f(x));}
draw(polargraph(f,0,pi,operator ..));
defaultpen(fontsize(20pt));
xaxis("$x$");
yaxis("$y$");
real theta=radians(50);
real r=f(theta);
draw("$\theta$",arc((0,0),0.5,0,degrees(theta)),red,Arrow,PenMargins);
pair z=polar(r,theta);
draw(z--(z.x,0),dotted+red);
draw((0,0)--(z.x,0),dotted+red);
label("$r\cos\theta$",(0.5*z.x,0),0.5*S,red);
label("$r\sin\theta$",(z.x,0.5*z.y),0.5*E,red);
dot("$(x,y)$",z,N);
draw("r",(0,0)--z,0.5*unit(z)*I,blue,Arrow,DotMargin);
dot("$(a,0)$",(1,0),NE);
dot("$(2a,0)$",(2,0),NE);
```
### blockdiag 方块图
~~~
```plot:blockdiag
blockdiag {
default_node_color = lightyellow;
default_group_color = lightgreen;
default_linecolor = magenta;
default_textcolor = red;
A -> B -> C;
B -> D;
group {
C; D;
}
}
```
~~~
```plot:blockdiag
blockdiag {
default_node_color = lightyellow;
default_group_color = lightgreen;
default_linecolor = magenta;
default_textcolor = red;
A -> B -> C;
B -> D;
group {
C; D;
}
}
```
### 图书封面
~~~
```plot:cover:ten
图书标题
作者
```
~~~
```plot:cover:ten
图书标题
作者
```
### ditaa
~~~
```plot:ditaa
+----------+ edit +----------+ input +----------+ compile +----------+
|cPNK | |cRED | | cGRE | |cPNK |
| refined|<-----+ h,cpp +-------->+ compiler,+-------->+Executable|
| h,cpp| | | | linker | | File |
| {s} | |{io} | | | | {s} |
+----------+ +----+-----+ +----------+ +----------+
| input
v
+----------+
|cGRE |
| doxygen|
| |
+----+-----+
| process
v
+----------+
|cPNK |
| Doxgen |
| Document |
| {d} |
+----------+
```
~~~
```plot:ditaa
+----------+ edit +----------+ input +----------+ compile +----------+
|cPNK | |cRED | | cGRE | |cPNK |
| refined|<-----+ h,cpp +-------->+ compiler,+-------->+Executable|
| h,cpp| | | | linker | | File |
| {s} | |{io} | | | | {s} |
+----------+ +----+-----+ +----------+ +----------+
| input
v
+----------+
|cGRE |
| doxygen|
| |
+----+-----+
| process
v
+----------+
|cPNK |
| Doxgen |
| Document |
| {d} |
+----------+
```
### 思维导图
~~~
```plot:markdown
# plot
## graphviz
### dot
### neato
### fdp
### sfdp
### twopi
### circo
## ditaa
## gnuplot
## markdown mindmap
### graphviz
```
~~~
```plot:markdown
# plot
## graphviz
### dot
### neato
### fdp
### sfdp
### twopi
### circo
## ditaa
## gnuplot
## markdown mindmap
### graphviz
```
### gnuplot
~~~
```plot:gnuplot
plot sin(x)*x;
```
~~~
```plot:gnuplot
plot sin(x)*x;
```
### Message Sequence Chart
~~~
```plot:msc
# Fictional client-server protocol
msc {
arcgradient = 8;
a ,b ;
a=>b ;
a-xb ;
a=>b ;
a<=b ;
a=>b ;
|||;
a<=b ;
|||;
}
```
~~~
```plot:msc
# Fictional client-server protocol
msc {
arcgradient = 8;
a ,b ;
a=>b ;
a-xb ;
a=>b ;
a<=b ;
a=>b ;
|||;
a<=b ;
|||;
}
```
页:
[1]