Umalu

UmaluはアスキーアートでUMLシーケンス図を描画します。

使用方法

まず、HTML中に以下のscriptタグを埋め込みます。

<script src="umalu-sequence.js"></script>

typeにtext/x-umalu-sequenceを指定したscriptタグにアスキーアートを埋め込むことで対応するシーケンス図が描画されます。

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

記述要素

アクターとメッセージ

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

ライフライン

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

フラグメント:繰り返し

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

フラグメント:条件分岐

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