插件〉FlowCharting

此插件已弃用，因其无人维护并依赖于 AngularJS。请考虑使用 Canvas 或浏览目录以寻找替代方案。

面板

社区

FlowCharting

概览
安装
相关内容

Grafana 插件 Flowcharting

Banner

Flowcharting 是一个 Grafana 插件。使用它可以通过在线图形库 draw.io 显示复杂的图表。Draw.io 可以创建多种类型的图表：

技术架构图（旧式、云、Azure、AWS、GCP、Kubernetes、Terraform）
图表（网络、电力、流程等）
工业流程
有机图
平面图
UML 图
工作流（Jenkins、Ansible Tower、OpenShift 等）

绘制您的图稿，实时馈送数据，并在 Flowcharting 中定义数据如何与图表交互。

监控状态和性能
与图表互动
根据数据或状态更改显示的对象
向对象添加链接
充分利用变量来修改形状、颜色、链接、下载路径等。
支持正则表达式用于匹配和替换

用例

技术方案示例

在 draw.io 查看更多示例

演示站点

https://play.grafana.org/d/Unu5JcjWk/flowcharting-index?orgId=1

入门

https://algenty.github.io/flowcharting-repository/STARTED.html

文档

https://algenty.github.io/flowcharting-repository/

项目站点

https://github.com/algenty/grafana-flowcharting

赞助和资助

自版本 0.7.0 发布以来，经过一年多的努力，我启用了赞助按钮。
为什么？Flowcharting 是免费的开源软件，它已经很成功，但它确实需要投入精力进行开发和维护。
我投入了大量个人时间和金钱（电脑、Azure 账户等）。
此外，我还向 FlowCharting 使用的项目（如 chartist）捐赠了资金。
因此，如果您喜欢 Grafana-FlowCharting 并将其用于您的企业、工作或个人用途。
点击下面的链接，通过赞助按钮帮助资助项目。
https://paypal.me/grafanaflowcharting

非常感谢
Arnaud

更新日志

[0.9.0] - 2020-05-31

新增

支持 CSV 格式作为流程图源 (https://drawio-app.com/import-from-csv-to-drawio/)
新的聚合：最后一点的时间
新的填充方法：渐变 (查看示例)
图表悬停支持 (查看示例)
使用 chroma-js 更好地渲染颜色动画
新的事件/动画映射
- 修改渐变方向
- 修改箭头开始和结束连接器 (查看示例)
- 水平或垂直翻转形状
- 按百分比调整形状大小 (查看示例)
- 流程动画（实验性，不适用于带阴影的箭头）
新的首页方案
支持外部字体，如 Google Fonts (查看示例)
检查部分新增匿名化功能，可分享图表而无需敏感数据 (查看示例)

修复

修复：流程图网格显示
修复：编辑模式下的背景颜色字段
修复：闪烁事件
修复：Grafana v7 上的溢出问题 (问题 #172)

[0.8.1] - 2020-05-11

新增

Grafana V7 的新插件 Logo (查看示例)

修复

修复：仪表盘变量。
优化性能和大小（7 Mo 而不是 15 Mo）。

[0.8.0] - 2020-05-02

新增

在规则字段 'what' 中按值/标签添加识别功能（实验性）
升级 Draw.io 库 (13.0.1)
添加选项以禁用 regex/eval，以获得少量性能提升。
在颜色映射部分添加 2 种新的颜色模式
- "标签背景"
- "标签边框"
添加执行时间统计以优化规则。
可折叠容器，无需禁用锁定。
为支持的字段添加新的自定义变量（文本映射 'with'，链接映射 'Url' 和事件映射 'Value'）
- ${_value}：原始值
- ${_formatted}：格式化值
- ${_level}：当前级别
- ${_rule}：当前规则名称
添加新功能：事件 / 动画映射，根据级别 (查看示例)
- 改变形状形式
- 改变大小、不透明度、旋转等
- 隐藏/闪烁形状
- 以及更多...

修复

对数刻度，感谢 Dennis (问题 #68)
删除映射时形状仍被选中。
在规则字段 'whats' 和字符串类型映射值中选择列表 (typeahead)
带范围或值映射的级别状态。
流程图选项中的锁定始终为 true (问题 #138)
修复移除链接
修复当 'from' 或 'to' 为空时范围值最小值和最大值
修复文本映射中的 'With' 字段在克隆或保存/重新加载后为空

[0.7.0] - 2020-03-25

新增

每个映射而不是每个规则的新条件和设计 (查看示例)
- when：何时应用条件
- what：哪个形状
- how：如何为形状着色
- 等等...
数字和字符串类型的阈值支持多种颜色 (查看示例)
渐变颜色模式 (查看示例)
启用/禁用动画（如颜色渐变），以获得最佳性能或在“直接链接渲染图像”中获得最佳渲染效果
更新库
- draw.io：12.8.6（Kubernetes 形状等）
- mxgraph：4.1.0

修复

修复 getNames 用于系列 (问题 #100)
修复克隆规则时的颜色问题 (问题 #124)
修复与 draw.io 最新版本相关的形状问题 (问题 #125)
修复“直接链接渲染图像” (问题 #114)

[0.6.1] - 2020-01-15

修复

修复编辑图表时无休止加载的问题 (问题 #102)
修复时间序列编辑模式错误 (问题 #100)
修复检查模式下的“应用按钮” (问题 #104)

[0.6.0] - 2019-12-21

新增

实验性实现表格类型数据（Mysql、Postgres、Zabbix、Streaming、loki 等）
一些优化
- 工具提示
- 状态
工具提示图
- 直方图 (查看示例)
下载输入 URL 中的变量支持 (查看示例)
颜色变化时添加渐变效果 (查看示例)
编辑器中新的规则设计 (查看示例)
TypeScript 迁移以获得最佳质量。
构建迁移到 grafana-toolkit（感谢 Dominik 和 Ryan）。
新的图表引擎，以获得更好的 draw.io 兼容性
改进 Firefox 和 IE/Edge 的缩放功能。
在 XML 和 URL 编辑模式下添加控件。
实现了字符串类型值的正则表达式，用于定义级别状态。

修复

修复首次加载时的下载 URL。
修复字符串的空值 (问题 #65)
修复“subways”编辑器错误 (问题 #73)
修复工具提示中日期的 2 位数显示 (问题 #77)
修复小错误。

[0.5.0] - 2019-10-17

新增

"更新文本值" 的 2 种新模式 (查看示例)
- 追加（空格）：使用空格作为分隔符连接指标
- 追加（新行）：使用换行符连接指标
链接映射中“Url”的变量化 (查看示例)
新增复选框，允许从 draw.io 下载图像 (查看示例)
新的编辑器选项
- 选择其他 draw.io 编辑器，如内部网站
- 选择编辑器主题
当鼠标光标悬停在规则或映射上时，新的形状识别模式 (查看示例)
支持动态形状，如平面图、等距图等 (查看示例)
适用于非 SVG 对象（如图片/剪贴画/图像）的新颜色模式 (查看示例)
工具提示中的图表 (查看示例)
- 使用阈值中定义的颜色为图表着色
- 图表大小 (查看示例)
在工具提示中为每个指标/图表定义方向：水平或垂直 (查看示例)
一些优化，加载时的显示速度提高了一倍。

修复

修复当“Color on”为“Always/Critical”且指标正常时颜色无法重置的问题
修复当“颜色模式”为“填充”时边框为空白而不是黑色 (问题 #24)
修复当“Value On”不是“When metric displayed”时发生的错误
修复链接 (问题 #37)
修复超链接文本在流程图上显示为白色 (问题 #45)
修复“一个仪表盘上的多个流程图”问题，编辑时两者显示相同的图表 (问题 #48)
修复重新加载或变量更改后的选项问题 (问题 #44)
修复数据刷新时自动重置缩放/取消缩放的问题，现在只有按下 ESC 或更改流程图选项才会重置缩放 (问题 #38)
修复 BPNM 形状的错误 (问题 #51)
修复流程图选项中勾选居中和缩放时的显示问题。
修复 Firefox 和 Edge 使用鼠标滚轮进行缩放的问题。

附录

本项目所有重要的变更都将记录在此文件中。

格式基于 Keep a Changelog，本项目遵循 Semantic Versioning。

即将到来/路线图

1.0 下一个/请求的增强功能

<input checked="" disabled="" type="checkbox"> 内部 draw.io 网站 (问题 #43)
<input checked="" disabled="" type="checkbox"> 显示工具提示 (0.4.0)
<input disabled="" type="checkbox"> 导出 SVG、png、选项
<input checked="" disabled="" type="checkbox"> Google 字体
<input checked="" disabled="" type="checkbox"> 在工具提示中添加数据 (0.4.0)
<input checked="" disabled="" type="checkbox"> 在图表中使用变量/模板 (0.4.0)
<input checked="" disabled="" type="checkbox"> 从 draw.io 添加自定义模板/库 (0.4.0)
<input checked="" disabled="" type="checkbox"> 颜色渐变变化，如仪表盘
<input disabled="" type="checkbox"> 支持浅色主题
<input disabled="" type="checkbox"> 注解
<input checked="" disabled="" type="checkbox"> 文本和箭头/线条上的工具提示
<input checked="" disabled="" type="checkbox"> URL 源下载 (0.4.0)
<input checked="" disabled="" type="checkbox"> 根据级别设置特殊规则（隐藏、显示、更改形状、移动、置前、置后、属性等）
<input checked="" disabled="" type="checkbox"> 自定义变量，如 ${_label}、${_value}、${_alias}、${_rule}、${_level} 等 (0.8.0)
<input checked="" disabled="" type="checkbox"> 链接中的变量支持 (0.5.0)
<input checked="" disabled="" type="checkbox"> 缩放/取消缩放 (0.4.0)
<input checked="" disabled="" type="checkbox"> 共享图表十字准线
<input checked="" disabled="" type="checkbox"> CSV 源 (0.9.0)
<input checked="" disabled="" type="checkbox"> 按值映射/搜索形状 (0.8.0)
<input checked="" disabled="" type="checkbox"> 下载源和压缩源的变量支持
<input disabled="" type="checkbox"> 多个图表，错误时自动链接
<input checked="" disabled="" type="checkbox"> 颜色渐变模式 (0.7.0)
<input checked="" disabled="" type="checkbox"> 超过 3 种颜色 (0.7.0)
<input checked="" disabled="" type="checkbox"> 工具提示中的图表 (0.6.0)
<input checked="" disabled="" type="checkbox"> 直方图
<input checked="" disabled="" type="checkbox"> 工具提示选项中新规则后的回车
<input checked="" disabled="" type="checkbox"> 图表中空值的过滤器
<input checked="" disabled="" type="checkbox"> 图像的新样式：imageBackground, imageBorder
<input checked="" disabled="" type="checkbox"> 支持来自 draw.io 的云图像
<input checked="" disabled="" type="checkbox"> 支持来自 draw.io 的图像 (0.5.0)
<input checked="" disabled="" type="checkbox"> 在文本上添加带有 CR 或空格的追加模式 (0.5.0)

支持或联系

Flowcharting 遇到问题？请查看 issues
电子邮件：grafana.flowcharting@gmail.com
Twitter：https://twitter.com/gf_flowcharting
RSS 新闻源：http://algenty.github.io/flowcharting-repository/news.xml

依赖项

Grafana Flowcharting 插件依赖项

[AngularJS] - 增强的 HTML，适用于 Web 应用！
[lodash] - 出色的基于 Web 的文本编辑器
[jquery] - 正确完成的 Markdown 解析器。快速且易于扩展。
[mxGraph] - 适用于现代 Web 应用的出色 UI 样板
[pako] - Zlib 移植到 JavaScript
[vkbeautify] - 精美打印和最小化 XML/JSON/SQL/CSV
[sanitizer] - Caja 的 HTML 清洁器
[chartist] - 工具提示的图表
[chroma-js] - 计算插值颜色

构建依赖项

[jest] - 令人愉快的 JavaScript 测试
[express] - 快速、不带偏见、极简主义的 Web 框架
[babel] - 您和正在为 node.js 开发的所有新文件格式（如 CoffeeScript、SASS 和 Jade）之间的软垫。
[grunt] - JavaScript 任务运行器
[webpack] - 为浏览器打包 CommonJs/AMD 模块。允许将代码库拆分为多个按需加载的 bundle。支持加载器对文件进行预处理，即 json、jsx、es7、css、less 等，以及您的自定义内容。

安装

Flowcharting 需要 Grafana v5+ 才能运行（未测试旧版本）下载并安装它

手动安装

$ cd $grafana_home/data/plugin
$ wget --no-check-certificate https://github.com/algenty/grafana-flowcharting/archive/master.zip
$ unzip master.zip

grafana-cli

grafana-cli plugins install agenty-flowcharting-panel

构建

$ git clone https://github.com/algenty/grafana-flowcharting
$ yarn build
$ # Make zip file plugin in archives dir
$ yarn archive
$ # for dev watching
$ yarn dev