mermaid.js で UML(シーケンス図)を書く

mermaid.js とは

UMLなどの図をテキストで記述できる JavaScriptのライブラリ

公式
https://mermaid-js.github.io/mermaid/#/

LiveEditor
http://mermaid-js.github.io/mermaid-live-editor/beta

StackEditでも使える
https://stackedit.io/app

シーケンス図例

LiveEditorのサンプルより

上記の図のソース

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!