Umalu

Umalu draws UML sequence diagram by ASCII art.

How to use

Bury below script tag in your HTML.
<script src="umalu-sequence.js"></script>

To draw sequence diagram, bury the ASCII art in script tag whose type attribute is text/x-umalu-sequence.


<script type="text/x-umalu-sequence">
   +--------------+  +----------+     +--------+
   |   User Web   |  |  Server  |     |   DB   |
   |    Client    |  +----------+     +--------+
   +--------------+        |              |
           |               |              |
          +-+ send        +-+             |
          | | request     | |             |
          | |------------>| |             |
          | |             | |             |
    +-------------------------------------------+
    |alt/ | |[success]    | |             |     |
    |     | |             | |            +-+    |
    |     | |             | |query       | |    |
    |     | |             | |----------->| |    |
    |     | |             | |            | |    |
    |     | |   +-----------------------------+ |
    |     | |   |loop/    | |            | |  | |
    |     | |   |         | |--,         | |  | |
    |     | |   |         | |  | process | |  | |
    |     | |   |         | |<-'         | |  | |
    |     | |   +-----------------------------+ |
    |     | |             | |            | |    |
    |     | |             | |Commit      | |    |
    |     | |             | |----------->| |    |
    |     | |             | |            | |    |
    |-------------------------------------------|
    |     | |[error]      | |            | |    |
    |     | |             | |Rollback    | |    |
    |     | |             | |----------->| |    |
    +-------------------------------------------+
          | |             | |            | |
          +-+             +-+            +-+
           |               |              |
</script>

Elements

Actor and Message


  +-------+  +-----+
  | Alice |  | Bob |
  +-------+  +-----+
      |         |
      | Hello   |
      |-------->|
      |         |

Lifeline


  +-------+   +-----+
  | Alice |   | Bob |
  +-------+   +-----+
      |          |
     +-+        +-+
     | | Hello  | |
     | |------->| |
     | |        | |
     +-+        +-+
      |          |

Fragment: loop


    +-------+  +-----+
    | Alice |  | Bob |
    +-------+  +-----+
        |         |
 +-------------------+
 |loop/ |[twice]  |  |
 |      |         |  |
 |      | Hello   |  |
 |      |-------->|  |
 |      |         |  |
 +-------------------+
        |         |

Fragment: Alternative


    +-------+  +-----+
    | Alice |  | Bob |
    +-------+  +-----+
        |         |
 +-------------------+
 |alt/  |[shiny]  |  |
 |      |         |  |
 |      | Hello   |  |
 |      |-------->|  |
 |      |         |  |
 |-------------------|
 |      |[rainy]  |  |
 |      |         |  |
 |      | Rainy   |  |
 |      |-------->|  |
 |      |         |  |
 +-------------------+
        |         |