如何用Kibana及Elasticsearch展示有向图（含Graphviz Dot文件）与有向状态图？

我来给你梳理下怎么用Kibana展示Dot格式的有向图（包括状态图），毕竟Kibana本身没自带直接解析Graphviz的工具，得绕个小弯子：

这是最灵活的方式，能直接解析Dot代码并渲染：

• 第一步：把你的Dot代码存进Elasticsearch
  打开Kibana的Dev Tools，执行类似这样的命令创建索引并存入Dot内容：

  PUT /graphviz_states/_doc/1
  {
    "dot_content": "digraph StateMachine { Idle -> Running; Running -> Paused; Paused -> Running; Running -> Completed; }"
  }
  

• 第二步：用Canvas自定义渲染
  新建一个Canvas工作区，添加一个Custom HTML元素，然后输入以下内容（借助viz.js这个Graphviz的JS实现来渲染）：

  <script src="https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.js"></script>
  <div style="width: 100%; height: 400px;" id="state-graph"></div>
  <script>
    // 从Elasticsearch拉取存好的Dot内容
    const dotText = '{{data.rows.0.dot_content}}';
    // 渲染成SVG并插入容器
    const svgOutput = Viz(dotText, { format: "svg" });
    document.getElementById('state-graph').innerHTML = svgOutput;
  </script>
  

  然后在Canvas的表达式栏，把数据源改成你刚才创建的graphviz_states索引，这样就能看到渲染好的有向图了。

如果不想依赖外部JS库，静态图可以先转成SVG：

• 用本地的Graphviz工具把Dot文件转成SVG：

  dot -Tsvg your_state_graph.dot > state_graph.svg
  

• 把SVG的纯文本内容存到Elasticsearch的某个字段（比如svg_content）里
• 在Kibana里，不管是Canvas还是Discover，都可以用Markdown元素或者字段的HTML格式化来直接渲染这个SVG内容——比如在Canvas的Markdown里写{{data.rows.0.svg_content}}，就能直接显示图形。

如果你的状态图是需要根据ES里的实时数据（比如状态转换日志）生成的，那不用存Dot文件，直接用Kibana自带的可视化：

• 把状态转换数据存入ES，每条文档包含from_state（起始状态）、to_state（目标状态）、transition_count（转换次数）这类字段
• 用Kibana的Sankey图可视化：把from_state设为「源」，to_state设为「目标」，transition_count设为「值」，就能自动生成有向的状态流转图
• 也可以安装第三方的Graph Visualization插件（注意版本兼容性），更直观地展示节点和边的关系

小提醒 #

• 如果是企业环境，加载外部JS库（比如viz.js）可能会有安全限制，这时候可以把viz.js打包到自定义Kibana插件里，或者直接用预处理SVG的方式
• Kibana官方没有原生支持Dot格式解析，所以自定义渲染或者预处理是目前的主要路径

内容的提问来源于stack exchange，提问作者HappyCoding