Skip to content
Flowcharting, Plugin Grafana for complexe diagram visio style like technical architectures, floorplan, diagrams, hierarchical schema based on draw.io
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 5ca4b05 Aug 7, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Push to finalize May 8, 2019
spec Prepare for pull May 6, 2019
src Push to finalize May 8, 2019
.babelrc inspect Mar 3, 2019
.eslintrc.json BACKUP PLUGIN.JS WORKS Apr 29, 2019
.gitignore update .git May 6, 2019
.prettierrc backup Apr 5, 2019
.tern-project backup Feb 6, 2019
Gruntfile.js backup May 6, 2019
LICENSE Initial commit Jan 24, 2019
README.md Add 0.4.0 Aug 7, 2019
jest.config.js unit test work May 5, 2019
lws.config.js backup graph work in test Mar 25, 2019
package-lock.json backup Apr 5, 2019
package.json unit test work May 5, 2019
yarn-error.log backup Apr 7, 2019
yarn.lock unit test work May 5, 2019

README.md

Grafana Plugin Flowcharting

Banner

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

  • Technical architecture schema
  • Diagrams
  • Organic plans
  • Floorplans
  • UML plan
  • ...

Draw your artwork and monitor it.

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

Features

[0.4.0 SNAPSHOT] - 2019-08-06

Only on download mode at this time, release planified in September https://algenty.github.io/flowcharting-repository/ARCHIVES.html

Added

  • Zoom (issue #19)
    • 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 :
    • Grafana style css and date
    • Adding metrics with color according levels
    • Adding colors on metrics in tooltip
    • Adding date of change
    • Adding label for metric
  • Variables/templates support, accept variable like ${} :
    • 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
  • Some optimizations

[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

  • Substring replace on text (Issue #8)
  • Editor object not found Exception (Issue #1)
  • Original Link (Issue #9)
  • Fixed Change the colors (Issue #14)
  • Fixed Unit (Issue #12)

[0.2.5] - 2019-04-19

Added

  • Mapping Helper for select object with mouse

Fixed

  • Substring replace on text (Issue #8)
  • Editor object not found Exception (Issue #1)

[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

Cooming soon/Roadmap

1.0 Pull request

  • Import Libs shapes from draw.io or custom libs.
  • Inverse stroke color for connector/edge to see it according theme.
  • Export SVG options.
  • Tooltips on error.
  • Use variables/templates in graph.
  • Add custom stencils/libs from draw.io
  • Only dark theme is supported at this time
  • Url source not implemented
  • SVG export not implemented

Pull request for version 2.0

  • Multi graph with auto link when errors
  • Gradien Mode for color

Support or Contact

Tech

Grafan flowcharting use libs :

  • [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

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
$ npm install --save-dev
$ ./node_modules/.bin/grunt
$ # Make zip file plugin in archives dir
$ ./node_modules/.bin/grunt archive
$ # for dev watching
$ ./node_modules/.bin/grunt dev
You can’t perform that action at this time.