Home What's New ? Getting Started Online Server Running F.A.Q. Download Forum Theme Preprocessing Standard Library PDF Guide Hitchhiker's Guide
PlantUML Advanced usage Ditaa diagram

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Ditaa

Ditaa (DIagrams Through Ascii Art) is an Open Source project that allows to generate general diagrams from a text descriptions. The idea is close to PlantUML, and it may be useful for documentation to generate other diagrams than UML.

Then PlantUML allows this :

🎉 Copied! 

@startditaa
+--------+   +-------+    +-------+
|        +---+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
    :                         ^
    |       Lots of work      |
    +-------------------------+
@endditaa

It is now not possible to use Ditaa with @startuml by using ditaa keyword on the very first line of your description. You must now use @startditaa and @endditaa.

⚠ On PlantUML, only PNG generation is supported.

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Generalisation (of @start/@end tag)

PlantUML now can generate diagrams other than UML. In such cases the usual @startuml does not make sense anymore. So now we allow diagrams start with @startXYZ and finish with @endXYZ, where XYZ can change with the type of diagram and can be any characters (including spaces).

This means that plugin developers are encouraged to change their code to recognize @start instead of @startuml.

DITAA diagrams are usually formatted as @startditaa...@endditaa.

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Option supported by PlantUML

You can also use some option, after the @startditaa or ditaa keyword:

  • -E or --no-separation to remove separator
  • -S or --no-shadows to remove shadow
  • scale=<XYZ> to scale up or down the diagram

Without option

🎉 Copied! 

@startditaa
+---------+  /--------\   +-------+
| cBLU    +--+cAAA    +---+Version|
|         |  |  Data  |   |   V3  |
|    +----+  |  Base  |   |cRED{d}|
|    |cPNK|  |     {s}|   +-------+
|    |    |  \---+----/
+----+----+    
@endditaa

Remove separator

🎉 Copied! 

@startditaa < -E
+---------+  /--------\   +-------+
| cBLU    +--+cAAA    +---+Version|
|         |  |  Data  |   |   V3  |
|    +----+  |  Base  |   |cRED{d}|
|    |cPNK|  |     {s}|   +-------+
|    |    |  \---+----/
+----+----+    
@endditaa

Remove shadow or scale diagram

🎉 Copied! 

@startditaa < --no-shadows, scale=0.7
+---------+  /--------\   +-------+
| cBLU    +--+cAAA    +---+Version|
|         |  |  Data  |   |   V3  |
|    +----+  |  Base  |   |cRED{d}|
|    |cPNK|  |     {s}|   +-------+
|    |    |  \---+----/
+----+----+    
@endditaa

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Tags

Tag Description
{c} Choice or Decision
{d} Document - Symbol representing a document
{io} Input/Output - Symbol representing input/output
{mo} Manual operation
{o} Ellipse
{s} Storage - Symbol representing a form of storage, like a database or a hard disk.
{tr} Trapezoid

🎉 Copied! 

@startditaa
+------+------+------+------+------+------+------+
| c {c}|d {d} |io{io}|mo{mo}|o{o}  |s{s}  |tr{tr}|
+------+------+------+------+------+------+------+
@endditaa

Edit in DokuwikiEdit in AsciidocEdit in Markdown
More documentation

You will find the complete documentation about ditaa on:

Privacy Policy      Advertise