FlowCharting

Panel

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

Grafana Plugin Flowcharting

Banner

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

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

Documentation

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

Project site

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

Changelog

[0.4.0] - 2019-09-26

Added

  • 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

Fixed

[0.3.0] - 2019-05-07

Added

/!\ Possible breaking change with 0.2.0 and 0.2.5 but it will compatible with next release.

  • Migration process for next release.
  • Dynamic documentation/Examples on popover (thx SCHKN)
  • Params link option, add params of dashboard to link.
  • Full review of code (ES6 Class mode)
  • Unit test with jest to increase quality
  • Fill/text/stoke rules on the same object is possible.
  • Mapping selector helper (chain in mapping)
  • Icon overlay state (display icon warning when NOK)
  • Implemented the conditions to display text according to the states.
  • new inspect Tab with :
    • Renamer ID (double click on ID)
    • State status
    • Debug mode
  • Custom Link Mapping overrite.

Fixed

[0.2.5] - 2019-04-19

Added

  • Mapping Helper for select object with mouse

Fixed

[0.2.0] - 2019-03-18

Added

  • Display graph through xml definition
  • Calibrate display (scale, center, background)
  • Inspect tab to test states and shape from graph.
  • Mapping values and colors (use stroke in color options for arrows instead fill)
  • String type added with range or value mapping.
  • Date type added
  • multi rules with expand/collapes for better display, possibility to reorg rules

[0.1.0] - 2019-09-02

Added

  • Display graph with mxgraph libs
  • Inspect tab to explore object in graph and preview colors

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.

Cooming soon/Roadmap

1.0 Next/Requested enhancements

  • [ ] Custom libs.
  • [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)
  • [ ] Support light theme
  • [X] Url source download (done in 0.4.0)
  • [ ] Special rule according level (hide, show, change form, move, infront, in back ...)
  • [ ] Variable support in link
  • [X] Zoom/Unzoom (done in 0.4.0)
  • [ ] Histogram in tooltip like heapmap
  • [ ] Shared graph crosshair
  • [ ] CSV source
  • [ ] Map/search shape by value
  • [ ] Variables support for downloaded source and compressed source
  • [ ] Multi graph with auto link when errors
  • [ ] Gradien Mode for color
  • [ ] More than 3 colors
  • [ ] Support images of draw.io
  • [ ] Add append mode on text with CR or space

Support or Contact

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

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.

Installation

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

Manualy

$ 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 install --dev
$ yarn build init
$ yarn build
$ # Make zip file plugin in archives dir
$ yarn build archive
$ # for dev watching
$ yarn build 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

Sign in to install

Version

Dependencies:
  • Grafana 5.x.x