Flowchart

Thank you to Josiah Solomon for exploring an epic Flowchart return to Grafana!

The following sections describe how to implement Flowchart libraries using the Business Text plugin.

Import two external libraries and then write your code to address the Flowchart libraries directly.

Example

Delivering Flowchart libraries to a Grafana dashboard using the Business Text plugin.

Use the following external library

https://esm.sh/flowchart.js
https://esm.sh/raphael

Content to copy

<div id="flowchart" />

After Content Ready

Warning
Plug-in libraries may change their versions and the code in the example may not work or cause an error.

Use the following for the JavaScript > After Content Ready:

import("https://esm.sh/flowchart.js").then(async (flowchart) => {
  await import("https://esm.sh/raphael");

  /**
   * Cleanup
   */
  document.getElementById("flowchart").innerHTML = "";

  const flow = `
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
para=>parallel: parallel tasks
in=>input: some in
out=>output: some out

st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1
para(path3, right)->in->out->e`;

  const diagram = flowchart.parse(flow);
  diagram.drawSVG("flowchart");
});