Skip to topic | Skip to bottom
TWiki.FlowchartPluginr1.17 - 28 Jun 2005 - 10:26 - AurelioAHeckert?topic end

Start of topic | Skip to actions


You can create flowcharts from textual content on the topic.

Este tópico em Português do Brasil


Include of URL is disabled Fuxograma de Exemplo
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


IDEA! 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.

IDEA! 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)
    <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 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/ 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:

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:

Related Topics: TWikiPreferences, TWikiPlugins

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

TWiki.FlowchartPlugin moved from TWiki.FluxogramaPlugin on 22 Jun 2005 - 18:46 by AurelioAHeckert? - put it back
You are here: TWiki > FlowchartPlugin

to top

All content is Copyright © 1999-2023 by, and the property of, the contributing authors.
Questions, comments, or concerns? Contact GNHLUG
Legal Notice (includes Terms of Service)