FlowchartPlugin

You can create flowcharts from textual content on the topic.

---

Example

Include of URL is disabled
Stop the mouse above each item and see the tag with the name in a bigger size.
Each item is a link for the text block what was created it and where can exist more information about this step.
The Based SVG The example above was generated by the content of the topic FlowchartPluginExample

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

To a better example see the FlowchartPlugin Example.

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

Atribute	Commentary
Type	Type of the flowchart's item. Default: Action
Id	Identification for the Goto. It needs to validate with /[_a-zA-Z0-9]*/
Color	Color differentiated for the item
Goto	Indicates so that item it must follow. Default: Next
Yes	The same as Goto, but is obligator for Type: Question
No	The same as Goto, but is obligator for Type: Question

The valid types are:

Type	Commentary
Start	Indicates the beginning of a flowchart. It must be placed in its first item
Action	The standard type. It indicates an action
Question	Opens a bifurcation in the flow. It compels the definition of attributes Yes e No
End	Indicates the end of the flowchart (or part of it)
End-Error	Differentiated end for the error case

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:

Parameter	Commentary
item-w	Width for the flowchart's itens area
item-h	Height for the flowchart's itens
area-w	Width of the area of the flowchart's itens
area-h	Height of the area of the flowchart's itens
percent	Percentage of the PNG size presented in relation to the standard of the generated SVG
text-size	Size in pixels of the font text
tag-style	Style for the img tag

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
• Test if the installation was successful:
  • See the FlowchartPluginExample

Plugin Info

Plugin Author:	TWiki:Main.AurelioAHeckert
Plugin Version:	27 Jun 2005 (V1.000)
Change History:
27 Jun 2005:	Initial public version 0.8
TWiki Dependency:	$TWiki::Plugins::VERSION 1.024
CPAN Dependencies:	none
Other Dependencies:	ImageMagick
Perl Version:	5.005
License:	GPL (GNU General Public License)
TWiki:Plugins/Benchmark:	GoodStyle nn%, FormattedSearch nn%, FlowchartPlugin nn%
Plugin Home:	http://TWiki.org/cgi-bin/view/Plugins/FlowchartPlugin
Feedback:	http://TWiki.org/cgi-bin/view/Plugins/FlowchartPluginDev
Appraisal:	http://TWiki.org/cgi-bin/view/Plugins/FlowchartPluginAppraisal

Related Topics: TWikiPreferences, TWikiPlugins

-- TWiki:Main.AurelioAHeckert - 17 Jun 2005
to top