====== flowchartjs Plugin ======

---- plugin ----
description: Draw flowchart (SVG) based on flowchart.js
author     : Hua Gao 
email      : ghbore@gmail.com
type       : syntax
lastupdate : 2023-08-07
compatible : 2016-06-26 "Elenor Of Tsort", 2017-02-19 "Frusterick Manners", 2018-04-22 "Greebo", 2020-07-29 "Hogfather", 2022-07-31 "Igor", 2023-04-04 "Jack Jackrum"
depends    : 
conflicts  : 
similar    : diagram, Ditaa, Graphviz
tags       : flowchart, diagram

downloadurl: https://github.com/ghbore/flowchartjs/zipball/master
bugtracker : https://github.com/ghbore/flowchartjs/issues
sourcerepo : https://github.com/ghbore/flowchartjs/
donationurl: 

screenshot_img : https://img-fotki.yandex.ru/get/108168/85226599.d/0_c9c93_de8fec8e_orig.png
----

===== Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

===== Examples/Usage =====

A complex example copied from [[http://flowchart.js.org|flowchart.js]]

  <flowchartjs default>
    st=>start: Start|past:>http://www.google.com[blank]
    e=>end: End|future:>http://www.google.com
    op1=>operation: My Operation|past
    op2=>operation: Stuff|current
    sub1=>subroutine: My Subroutine|invalid
    cond=>condition: Yes
    or No?|approved:>http://www.google.com
    c2=>condition: Good idea|rejected
    io=>inputoutput: catch something...|future
    st->op1(right)->cond
    cond(yes, right)->c2
    cond(no)->sub1(left)->op1
    c2(yes)->io->e
    c2(no)->op2->e
  </flowchartjs>

The output is as the above snapshot.

===== Syntax =====

Basic syntax:
<code><flowchartjs style width height>...</flowchart></code>
  * **style** flowchart display style. Currently it can be one of this:
    * (blank) --- no style
    * ''default'' --- default style
    * or other available style (see below)
  * **width** and **height** CSS-style values to control the width/height of this SVG. blank leaves its default.
  * **%%...%%** flowchart definition, which should follow grammar in [[http://flowchart.js.org|flowchart.js]].

===== Configuration and Settings =====

Through Amin Plugin (though ugly), managers can upload a new or update existing flowchart style (JSON file, must with .json extension, and the filename will be the style name), and delete any styles.

Toolbar **FC** inserts pair of flowchartjs tag, while **F<sub>c</sub><sup>s</sup>** toggles list of available style.


=== Change Log ===
  * **2023-08-09**
    * fix the way to control the svg size
    * update the js library
    * update the contact info
  * **2021-01-15** 
    * fix the bug not loading style correctly
  * **2020-10-10**
    * update Rapheal library to 2.3.0 and flowchart to 1.14.1
  * **2019-11-28**
    * solving issue about style not correctly loading (by chaotic-bruno)
  * **2019-06-19**
    * add extra parameters to control svg `width` and `height`
  * **2019-05-02**
    * fix warning messages and update libraries
  * **2018-07-03**
    * fix compatibility warnings
  * **2018-06-03**
    * Merge pull request from apppies/library_update
      - update flowchart to 1.11.0
      - update Raphael to 2.2.1
  * **2018-01-13**
    * many updates:
      - fix bug from leading space by updating flowchart.js library,
      - add admin plugin which allows management flowchart styles,
      - add toolbar facilitating selection of flowchart style.
  * **2017-02-16**
    * Initial release