Flowcharting is a plugin for grafana. It aims to display complexe diagram draws with draw.io like Visio

Grafana Plugin Flowcharting


Flowcharting is a plugin for grafana. It aims to display complexe diagram draws with draw.io like Visio. Few examples :

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

Draw your artwork and monitor it.

Use case example

  • Technical schema example
    example 1

See more example at draw.io

Getting started




Project site


Sponsors and Funding

Since the version 0.7.0 and after one year of work, I activated the sponsor button.
Why ? Flowcharting stills free and open-source, but since the success of it, i spend many personal times and money (computer, Azure account ...).
Also i donate money for project used by FlowCharting like chartist.
Then if you like Grafana-FlowCharting, you used it for your enterprise or other, you want to contribute, click on Sponsor button or Financing the project with the link bellow.

Thanks a lot Arnaud


[0.7.0] - 2020-03-25


  • new conditions and design in rule for each mapping instead one by rule (See example)
    • when : When condition applied
    • what : which shape
    • how : how to colorize shape
    • and more ...
  • Multi colors for thresholds with type number and string (See example)
  • Gradient color mode (See example)
  • Enable/disable animation like fade color for best performance or best render in 'Direct link rendered image'
  • Update libs :
    • draw.io : 12.8.6 (Kubernetes shapes and more)
    • mxgraph : 4.1.0


[0.6.1] - 2020-01-15


[0.6.0] - 2019-12-21


  • Experimental implementation for table type data (Mysql, Postgres, Zabbix, Streaming, loki and other ...)
  • Some optimization on :
    • tooltips
    • States
  • Tooltip Graph :
  • Variables support in download input url (See example)
  • Add graduate effect when color changed (See example)
  • New rule design in editor (See example)
  • Typescript migration for best quality.
  • Build migration to grafana-toolkit (thanks Dominik and Ryan).
  • New engine graph for best compatibility with draw.io
  • Better Zoom for firefox and IE/edge.
  • Add controls on edit mode for XML and URL.
  • Regular expression for String type value implemented to define level state.


  • Fix download url on first load.
  • Fix value null for string (issue #65)
  • Fix bug "subways" Editor (issue #73)
  • Fix date on 2 digit in tooltip (issue #77)
  • Fix minors bug.

[0.5.0] - 2019-10-17


  • 2 new modes for "Update text value" (See example)
    • Append (Space) : Concat metrics with a space as a separator
    • Append (New line) : Concat metrics with a line break
  • Variabilization in "Url" for link mapping (See example)
  • New check box to allow download images from draw.io (See example)
  • New editor option :
    • Choose other editor draw.io like internal website
    • Choose the theme of editor
  • New identification mode for shapes when mouse cursor is over the rules or the mapping (See example)
  • Support Dynamic shapes like Floorplan, isometric plans and more (See example)
  • New color mode for no SVG object like pictures/cliparts/images (See example)
  • Graphs in tooltip (See example)
    • Color graph with defined colors in threshold
    • Size of graph (See example)
  • Define the orientation in tooltip for each metrics/graph in tooltips : horizontal or vertical (See example)
  • Some optimizations, Display is twice as fast on load.


  • Fix color to reset when "Color on" is "Always/Critical" and metric is OK
  • Fix border to empty instead black when "color mode" is "Fill" (issue #24)
  • Fix error when "Value On" is not "When metric displayed"
  • Fix Link (issue #37)
  • Fix hyperlink text appears in white over flowchart (issue #45)
  • Fix "Multiple FlowCharts On a Dashboard", when edit, both are the same draw (issue #48)
  • Fix options after reload or variable changed (issue #44)
  • Fix auto reset zoom/unzoom when data refreshed, only ESC or change options on flowchart reset zoom now (issue #38)
  • Fix error for BPNM shapes (Issue #51)
  • Fix display when center and scale are checked on flowchart options.
  • Fix Zoom with mouse wheel for firefox and Edge.

[0.4.0] - 2019-09-26


  • Draw.io editor (see example)
    • Open draw.io with dark theme for better rendering
    • Display waiting screen when loading xml definition.
  • Upgrading libraries
    • mxGraph 4.0.4
    • draw.io 11.2.8
  • Graph definition
    • Adding download function to download source by http on load. (See example)
  • Metric
    • Adding string support for state (See example)
  • Zoom (issue #19) (See example)
    • On the mouse pointer : Ctrl + Mouse
    • Hold right button to move diagram.
    • double click on shape to zoom on.
    • Escape key to restore.
  • Tooltip/popup support (see example)
    • Grafana style css and date
    • Adding metrics with color according levels
    • Adding colors on metrics in tooltip
    • Adding date of change
    • Adding label input for metric
  • Variables/templates support, accept variable like ${} (See example)
    • In xml definition
    • In text mapping when type in sring for "Range to text" and "Value to text"
    • In link ovewrite
  • full shapes from draw.io included (See example)
  • Some optimizations on render and display.



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.

Cooming soon/Roadmap

1.0 Next/Requested enhancements

  • [ ] Custom libs.
  • [X] Internat draw.io website (issue #43)
  • [X] Display tooltip (done in 0.4.0)
  • [ ] Export SVG, png, options
  • [X] Add data in tooltip (done in 0.4.0)
  • [X] Use variables/templates in graph (done in 0.4.0)
  • [X] Add custom stencils/libs from draw.io (done in 0.4.0)
  • [X] Progressive change color like gauge
  • [ ] Support light theme
  • [ ] Annotation
  • [X] Tooltips on text and arrow/line
  • [X] Url source download (done in 0.4.0)
  • [ ] Special rule according level (hide, show, change form, move, infront, in back, attributes, ...)
  • [ ] Custom variables like ${_label},${_value}, ${_alias}, ${_rule}, ${_level} ...
  • [X] Variable support in link (done in 0.5.0)
  • [X] Zoom/Unzoom (done in 0.4.0)
  • [ ] Shared graph crosshair
  • [ ] CSV source
  • [ ] Map/search shape by value
  • [X] Variables support for downloaded source and compressed source
  • [ ] Multi graph with auto link when errors
  • [X] Gradien Mode for color
  • [X] More than 3 colors
  • [X] Graph in tooltip
  • [X] Histogram
  • [ ] Merge Graphs
  • [X] carriage return after new rule in tooltips option
  • [X] Filter for null values in graph
  • [ ] Inspector on series
  • [X] New style for image : imageBackground, imageBorder
  • [X] Support cloud images from draw.io
  • [X] Support images from draw.io (done in 0.5.0)
  • [X] Add append mode on text with CR or space (done in 0.5.0)

Support or Contact


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
  • [vkbeautify] - Pretty prints and minifies XML/JSON/SQL/CSV
  • [sanitizer] - Caja's HTML Sanitizer
  • [chartist] - Graph for tooltip

Build dependencies

  • [jest] - Delightful JavaScript Testing
  • [express] - Fast, unopinionated, minimalist web framework
  • [babel] - Soft cushion between you all the cool new file formats being developed for node.js such as CoffeeScript, SASS, and Jade.
  • [grunt] - 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.


Flowcharting requires Grafana v5+ to run (not tested lower version) Download and install it


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


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 build archive
$ # for dev watching
$ yarn dev

Class diagram


Event diagram (In progress)


Sign in to install


  • Grafana 6.x.x