====== Ditaa-Plugin ======

---- plugin ----
description: Converts ASCII-Flowcharts to png-Graphics using ditaa
author     : Andreas Gohr
email      : andi@splitbrain.org
type       : syntax
lastupdate : 2010-11-24
compatible : lemming, anteater
depends    : 
conflicts  : 
similar    : Graphviz, diagram
tags       : media, images, diagram, java

downloadurl: http://github.com/splitbrain/dokuwiki-plugin-ditaa/zipball/master
bugtracker : http://github.com/splitbrain/dokuwiki-plugin-ditaa/issues
sourcerepo : http://github.com/splitbrain/dokuwiki-plugin-ditaa/
----

Previous author: [[develop@dieploegers.de|Dennis Ploeger]]

Ditaa is a tool to convert ASCII-Art flowcharts and diagrams into their graphical equivalents. This Plugin integrates this feature into DokuWiki. See the [[http://ditaa.sourceforge.net/|ditaa homepage]] for details about ditaa.

===== Download and Installation =====

Download and install the plugin using the [[plugin:plugin|Plugin Manager]] using the URL given above. Refer to [[:Plugins]] on how to install plugins manually.

==== Changes ====

{{rss>http://github.com/splitbrain/dokuwiki-plugin-ditaa/commits/master.atom date}}

===== Configuration =====

The plugin provides a configuration setting in the [[plugin:config|config manager]] to specify the path to your Java interpreter. When set, the tool will run ditaa locally on your server to create the graphics. The ditaa jar file is included in the plugin, you do not need to download it separately.

When you do not provide a Java interpreter path in the config, the plugin will use the webservice at ditaa.org to create the images. Having Java available on your server is now completely optional!

===== Syntax =====

The syntax wraps any [[http://ditaa.sourceforge.net/|ditaa formatted]] ASCII flowchart into %%<ditaa></ditaa>%% tags. The opening tag can have several additional optional parameters (see below).

<code html>
<ditaa [optional parameters]>

... (some ditaa-code) ...

</ditaa>
</code>

==== Parameters ====

^ Parameter           ^ Default       ^ Description ^
| width=//<num>//     | width=0       | Rescale the final image to this width. When set to 0, diita will choose the needed width and no rescaling is done. |
| height=//<num>//    | height=0      | Same as above but for height. Only works when a width is given as well |
| //<num>//x//<num>// | 0x0           | Combines the above parameters into one. That's a lowercase x! |
| <float>X            | 1.0X          | Tells ditaa to scale the image. Eg. 2.0X makes the final image twice as big. That's an uppercase X |
| (no)round           | noround       | Enable or disable round corners for all boxes |
| (no)shadow          | shadow        | Enable or disable box shadows |
| (no)antialias       | antialias     | Enable or disable antialiasing |
| (no)edgesep         | edgesep       | Enable or disabling the separation of box edges where boxes directly touch |
| left center right   |               | Align the image to the left, center or right. Default does no alignment (inline)|

===== Possible tags =====

Not all shape selector tags are documented on the ditaa site. A quick source scan revealed:

^ tag  ^ Description   ^
| {c}  | decision(Choice)  |
| {d}  | document  |
| {io} | input/output, parallelogram  |
| {mo} | manual operation  |
| {o}  | ellipse, circle  |
| {s}  | storage  |
| {tr} | trapezoid (looks like an inverted {mo} )  |


===== Example =====

{{ http://img696.imageshack.us/img696/7251/foom.png?nolink&|Ditaa Example}}

<code>
<ditaa round noedgesep right>
    +--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |  c978 |    |       |
    +---+----+   +-------+    +-------+
        |                         ^
        |       Lots of work      |
        +------------+------------+
                     |
                     |
                     OK
</ditaa>
</code>

===== Discussion =====

Would it be possible to embed active dokuwiki links, or even implement an imagemap for the rendered png, so the boxes can become active links - a bit like flowchartwiki ? -- //LS 20120111//

==== Bugs ====

Ditaa don't understand non-latin characters. For example: Cyrillic.