FlowchartPlugin

You can create flowcharts from textual content on the topic.

Example

In the text to define the itens of the Flowchart you must to write by this way for each item:

---++ Item of the Flowchart
   * Id: unic_nome
   * Type: Question
   * Yes: item_A
   * No: item_B

Syntax Rules

To create and present the flowchart, add the variable %FLOWCHART% ou %FLOWCHART{Parameters}%.

This plugin Plugin collects the content of the text and considers that each heading level two ---++ indicate the beginning of the definition of a new item of the flowchart. To specify the item and the derived action is expected a list of the type * Attribute: Value

To control the beginning and end of of valid headings for the construction of the Flowchart use %FLOWCHART_START% and %FLOWCHART_STOP%.

If a name is excessively big for the space of the item a line break can be made with %FLOWCHART_BR%, that does not intervene with the text of the page, only in the flowchart.

To personalize a flowchart, is enough to add parametros to the variable: %FLOWCHART{Parameters}%
The valid parametros are:

Tips

The web bowsers normally make cache of the web page and of the elements contained in that (images, animações, sounds...). It is possible that after to save the modification in the definition of the flowchart you do not see the effect of the modification in the image. In this case click "Reload" in your web browser.

Some flowcharts can become so complex and will be difficult to follow its lines. In this case, increase the area of itens, giving a bigger space between them. eg: %FLOWCHART{ area-w="220" area-h="100" }%

Construction of the Flowchart and Plugin's Working Way

1. The blocks initialized by a heading level two ---++ are read as definition of item of the Flowchart (as the TWiki:Plugins.SlideShowPlugin).
2. A SVG is created with this information and is annexed in the topic. This SVG file can be had access by %ATTACHURL%/flowchart_%TOPIC%.svg.
3. A PNG is generated with the ImageMagick and reduced, so that the image has a good anti-aliasing, that it is not obtained in the direct conversion. The PNG is annexed in the topic and can be had access by %ATTACHURL%/flowchart_%TOPIC%.png (use this advantage to separate the flowchart's image of the definition topic when it is interesting).
4. Is created a map for the image linking the itens of the flowchart whith the origin of its information, where can exist more information for implementation. %ATTACHURL%/flowchartMapImg_%TOPIC%.txt (use to map the image out off the topic where the flowchart was generated too)
   %INCLUDE{"%PUBURL%/Web/FlowchartTopic/flowchartMapImg_FlowchartTopic.txt"}%
<img src="%PUBURL%/Web/FlowchartTopic/flowchart_FlowchartTopic.png" usemap="flowchart_FlowchartTopic" alt="Flowchart" border="0" />
5. The content of the map file and one image tag presenting the PNG are placed in the place of variable %FLOWCHART%.

The files (SVG, PNG and Map) are generated when the topic contend %FLOWCHART% is saved.

Plugin Settings

Plugin settings are stored as preferences variables. To reference a plugin setting write %<plugin>_<setting>%, i.e. %INTERWIKIPLUGIN_SHORTDESCRIPTION%

• One line description, is shown in the TextFormattingRules topic:
• Set SHORTDESCRIPTION = Bilds a flowchart from information on the topic

• Standard width for the flowchart's itens
• Set ITEM_WIDTH = 140
• Standard height for the flowchart's itens
• Set ITEM_HEIGHT = 40
• Standard width for the area of the flowchart's itens
• Set ITEM_AREA_W = 180
• Standard height of the area of the flowchart's itens
• Set ITEM_AREA_H = 70
• Standard size in pixels of the font text
• Set TEXT_SIZE = 17
• Standard percentage of the PNG size presented in relation to the standard of the generated SVG
• Set PERCENT_IMG = 70
• Standard style for the img tag
• Set TAG_STYLE = border:1px dotted #505050;

• Debug plugin: (See output in data/debug.txt)
• Set DEBUG = 0

Plugin Installation Instructions

Note: You do not need to install anything on the browser to use this plugin. The following instructions are for the administrator who installs the plugin on the server where TWiki is running.

• Download the ZIP file from the Plugin web (see below)
• Unzip FlowchartPlugin.zip in your twiki installation directory. Content:

  File:	Description:
  data/TWiki/FlowchartPlugin.txt	Plugin topic
  data/TWiki/FlowchartPlugin.txt,v	Plugin topic repository
  data/TWiki/FlowchartPluginExample.txt	Plugin Example
  data/TWiki/FlowchartPluginExample.txt,v	Plugin Example repository
  lib/TWiki/Plugins/FlowchartPlugin.pm	Plugin Perl module
  pub/TWiki/FlowchartPluginExample/flowchart_FlowchartPluginExample.png	The example image to show
  pub/TWiki/FlowchartPluginExample/flowchart_FlowchartPluginExample.svg	The example base SVG
  pub/TWiki/FlowchartPluginExample/flowchartMapImg_FlowchartPluginExample.txt	The example map file

• Install the ImageMagick
• (Dakar) Visit configure in your TWiki installation, and enable the plugin in the {Plugins} section.
• Test if the installation was successful:
• See the FlowchartPluginExample

Plugin Info

Related Topics: TWikiPreferences, TWikiPlugins