Graphviz Demo

这个页面测试了 Graphviz 组件的功能。

默认对齐 (居中)

默认情况下，图表会居中显示。

<Graphviz>
  digraph G {
    a -> b;
    b -> c;
    c -> a;
  }
</Graphviz>

左对齐

通过设置 alignment="left" 属性，可以将图表左对齐。

<Graphviz alignment="left">
  graph {
    A -- B -- C;
  }
</Graphviz>

右对齐

通过设置 alignment="right" 属性，可以将图表右对齐。你也可以同时使用 containerClass 或 :containerStyle 添加自定义样式。

<Graphviz alignment="right" containerClass="my-graph-container" :containerStyle="{ border: '1px dashed blue' }">
  digraph D {
    node [shape=box];
    start -> process -> end;
  }
</Graphviz>

<style scoped>
.my-graph-container {
  background-color: #f0f0f0;
  padding: 10px;
}
</style>

使用不同的引擎

Graphviz 组件支持以下布局引擎，可以通过 engine 属性指定：

• dot (默认): 适用于有向图的层次布局。
• neato: 适用于无向图的弹簧模型布局。
• fdp: 适用于无向图的弹簧模型布局，通常比 neato更快。
• sfdp: 适用于大型无向图的弹簧模型布局。
• twopi: 适用于径向布局，根节点在中心。
• circo: 适用于圆形布局，用于显示图的循环结构。

你可以通过设置 engine 属性来指定 Graphviz 的布局引擎。这里演示使用 circo 引擎，它适用于绘制循环或圆形布局的图。

<Graphviz engine="circo">
  graph {
    node [shape=circle];
    1 -- 2;
    2 -- 3;
    3 -- 4;
    4 -- 5;
    5 -- 1;
    1 -- 3;
    2 -- 4;
    3 -- 5;
    4 -- 1;
    5 -- 2;
  }
</Graphviz>

错误显示

当提供的 DOT 语法无效或插槽为空时，组件会直接显示错误信息。

空插槽

<Graphviz>
</Graphviz>

无效的 DOT 语法

这里使用一个明显缺少结束大括号的语法作为非法示例。

<Graphviz>
  digraph E {
    a -> b;
</Graphviz>