Grafana Plugin Flowcharting

Flowcharting is a Grafana plugin. Use it to display complexe diagrams using the online graphing library draw.io Draw.io can create many types of diagrams :

Technical architecture schema (Legacy, Cloud, Azure, AWS, GCP, Kubernetes, Terraform)
Diagrams (network, electric, flows, ...)
Industrial processes
Organic plans
Floorplans
UML plan
Workflows (Jenkins, Ansible Tower, OpenShift, ...)

Draw your artwork, feed it live data and define in flowcharting how the data will interact with the diagram.

Monitor state and performance
Interact with the diagram
Change the displayed objects based on data or state
Add links to objects
Make full use of variables to modify shapes, colours, links, download paths and more.
Support for regular expressions for matching and substitutions

Use cases

Technical schema example

See more example at draw.io

Demo site

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

Getting started

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

Documentation

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

Project site

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

Sponsors and Funding

Click on the Sponsor button to help finance the project with the link below.
https://paypal.me/grafanaflowcharting

Thanks a lot Arnaud

Changelog

[1.0.0d (Last build 2022-06-06)]

Known issues

Shared cross on grafana 8.x (minor)
Flow animation on arrows (minor)
External image from diagrams.net not displayed (minor)

Added

Convert sync method to async : render graph before update states (speed x2)
clean dirty code
Support last version of grafana (8.5.x)
New initialization engine for drawio libs
New draw.io libs (17.x 2022-04-23)
New notifier handler in panel.
Change default url draw.io with https://embed.diagrams.net
New edit design for grafana v7-8 (See example)
New UX design and new concept "fast edit" :
- Can edit without expand rules and flowcharts with icons
- Advanced/detail mode on expand.
- Fast edit mode
Add shape name and properties in inspect console (See example)
Add gaugePos property in Event Mapping for the gauge draw.io models See example)
Plugin is signed
Add Light theme support
New thresholds type : dates (accept units like d, w, m, y, h, s or a date)
New event mapping operators
Enable/Disable rule/state/mapping independently.
Colors (threshold and background) can be empty.

Fixed

Fixed : Inspect mode (issue #209) (See example)
Fixed : Label position in shape (issue #147)
Fixed : Initialization of first model
Fixed : Display refresh between "edit mode" and "dashboard mode" in grafana v7 (issue #205)
Fixed : zoom on text without witdth and height
Fixed : Disable select text when double click for zoom
Fixed : retro compatibility with grafana 6.x (issue #218)
Fixed : Zoom with 2 or more FlowCharting (issue #214)
Fixed : Background color edition in flowchart tab

See Changelog file for history

Annex

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Roadmap

Upgrading Flowcharting to react components => 2022-08-31
Supporting Multi-graph in one panel => 2022-10-31

1.0 Next/Requested enhancements

Support or Contact

Having troubles with flowcharting ? Check out issues
Email : [email protected]
Twitter : https://twitter.com/gf_flowcharting
RSS feed news : http://algenty.github.io/flowcharting-repository/news.xml

Dependencies

Grafane flowcharting plugin dependencies

[AngularJS] - HTML enhanced for web apps!
[lodash] - awesome web-based text editor
[jquery] - Markdown parser done right. Fast and easy to extend.
[mxGraph] - great UI boilerplate for modern web apps
[pako] - Zlib port to javascript (used by diagrams.net)
[vkbeautify] - Pretty prints and minifies XML/JSON/SQL/CSV
[sanitizer] - Caja's HTML Sanitizer
[chartist] - Graph for tooltip
[chroma-js] - Calculate interpolate colors

Build dependencies

[jest] - Delightful JavaScript Testing
[babel] - Soft cushion between you all the cool new file formats being developed for node.js such as CoffeeScript, SASS, and Jade.
[gulp] - The JavaScript Task Runner
[webpack] - Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.

Installation

Flowcharting requires Grafana v5+ to run (not tested older versions) Download and install it

Manualy (deprecated)

$ 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

Build

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

Class diagram

https://www.draw.io/?chrome=0&lightbox=1&url=https%3A%2F%2Fraw.githubusercontent.com%2Falgenty%2Fflowcharting-repository%2Fmaster%2Fgraphs%2FFlowcharting_carto.drawio

Event diagram (In progress)

https://www.draw.io/?chrome=0&lightbox=1&url=https%3A%2F%2Fraw.githubusercontent.com%2Falgenty%2Fflowcharting-repository%2Fmaster%2Fgraphs%2FFlowcharting_Events.drawio

algenty/grafana-flowcharting

algenty

Reviews

Repository Details