为新功能投票

或者捐助一些钱来帮助我的孩子 :sweat_smile

我也可以提供定制插件开发合同[以及其他技术项目]

grafana-diagram

这是一个 Grafana 面板插件，通过利用 mermaid.js 库提供创建流程图、时序图和甘特图的方法。

• 可以使用 Mermaid JS 语法定义图表。
• 使用指标系列来着色形状/节点的文本或背景。
• 将系列的目标或“别名”与图表节点的 ID 进行比较，以找到匹配项，然后为形状应用样式。
• 可以使用复合体对单个节点聚合多个系列，每个系列有自定义阈值。

**注意 - 别名中的特殊字符将替换为下划线。请参见下面的字符替换

快速入门

图表定义使用类似于 Markdown 的语法，称为 Mermaid
这是一个简单的流程图定义 -

graph LR
      A --> B

生成此图形

假设你有两个系列，别名为 A-series 和 B-series
在图表插件中，您可以修改定义以匹配数据的标识符 -

字符替换

以下字符在指标名称中将自动替换为下划线。

" , ; = : { }

待办事项

You can add additional metric replacements in the Display tab, under the section Metric Character Replacement:  
A single character can be specified or a regular expression, along with the text to be used for the replacement (the default is underscore).

示例

使用子图

使用自定义形状、别名和图标

graph LR
      LB[Load Balancer] -- route1 --> web1
      LB[Load Balancer] --> web2
      web1 --> app1(fa:fa-check app1)
      web1 ==> app2
      web2 ==> app2(fa:fa-ban app2)
      web2 --> app1
      app1 --> D[(database)]

字段选项

字段覆盖

自定义主题

CSS 覆盖

使用变量

使用背景作为指示器

选项

• 阈值 [字段可以覆盖]
• 聚合选项 [字段可以覆盖]
• 未绑定颜色级别 [字段可以覆盖]
• 将值映射到文本 [字段可以覆盖]
• 单位格式 [字段可以覆盖]
• 要显示的指标值（最小/最大/平均值/最后/）[字段可以覆盖]
• 小数精度 [字段可以覆盖]
• CSS 覆盖
• 指示器作为背景或文本颜色
• 主题响应式
• 主题定制
• 在图表定义中使用变量替换

链接指标

Mermaid 表达式相同，但现在支持在 "text" 中提供度量名称。

请在双引号中指定度量名称（用于转义目的）。

度量组合

为了在单个节点上反映多个度量及其阈值，请使用度量组合来指定组合名称和要评估的组合度量。

将针对每个度量评估特定的系列/字段覆盖，并显示组合的“最差”状态。

组合名称在图表定义中评估。

例如，将两个系列 "A-series" 和 "B-series" 合并到名为 "xyz" 的单个组合中，可以使用以下方法

当接收每个系列的每个数据时，阈值将被评估以找到“最差”阈值级别，并且度量值和颜色值将在图表中的 "xyz" 组合中反映。

以下是组合动作的示例

此图表具有 "xyz" 节点，A和B系列都设置了 "全绿色" 阈值

此图表具有 "xyz" 节点，其中A系列为绿色，但B系列为黄色。图表节点显示黄色，并附带值

此图表具有 "xyz" 节点，其中A系列为绿色，但B系列为红色。图表节点显示红色，并附带值

此图表具有 "xyz" 节点，其中A系列为黄色，B系列为绿色。图表节点显示黄色，并附带值

值或范围到文本映射

值和范围映射可以用于用可读文本替换数值。
在图表中，匹配系列的值将被映射到文本

路线图

• 自定义字符替换
• 实现哈希前缀表示法处理器??
  [新的字段映射可能替代此功能]
• 远程图表定义URL
• [建议内容]

开发

查看此处

感谢！

特别感谢 Mermaid 贡献者 -
https://github.com/mermaid-js/mermaid/graphs/contributors
https://mermaid-js.github.io/

以及 D3 贡献者 -
https://github.com/d3/d3/graphs/contributors

特别是 Grafana 贡献者 -
https://github.com/grafana/grafana/graphs/contributors
http://grafana.org/

了解更多信息

• 构建面板插件教程
• Grafana 文档
• Grafana 教程 - Grafana 教程是逐步指南，帮助您充分利用 Grafana
• Grafana UI 库 - UI 组件，帮助您使用 Grafana 设计系统构建界面