読者です 読者をやめる 読者になる 読者になる

竹林のゆとりブログ

山奥で生活し、日々の思いをつらつらと書くブログ。 IT、数学、アニメなど。

MDwikiでフローチャートを表示させてみた

MDwikiでいくつかの課題があったんですが、フローチャートを作成できたので、 まとめてみます。

MDwikiにはyUMLを使ってUMLを作成できます。

参考リンク

ここのUML Diagrams via yUML.meの章にいくつか、記載されています。

ただ、こちらでもいくつか試してみたので、まとめておきます。

yUMLとは

Create UML diagrams online in seconds, no special tools needed.

Create and share simple UML diagrams in your blogs, wikis, forums, bug-trackers and emails.

と記載されています。
要は、UMLを描画してくれるウェブサービスです。 UMLを画像として作成してくれるので、それをDLすることもできますし、画像自体をリンクさせることもできおます。

  • メリット リンクとして作成できるので、ブログ等に貼り付けるには苦労しません。
  • デメリット ネットに繋がっていないと描画できない。 もちろんDLした画像をリンクにすれば違いますが…。その場合は変更が手間だというデメリットがあります。

UML Diagrams via yUML.me_とは?

mdwikiの機能で、mdwikiを経由して、yUMLのサービスを利用しUMLを描画するもの

書き方の例

ソースはこんな感じ

[gimmick: yuml (direction : 'TB')]( [HttpContext]uses -.->[Response] , [Response]->[start] )

描画すると

f:id:fatal-t-h-f-flydream-bamboo:20160417182130p:plain

基本的な文法

[gimmcik: yuml]()と書くと、yUMLモードとなります。

  • ()の中
    □と-の情報を書きます。 □はで作成します。中の文字はの中に文字を書くことでできます。
    □同士の線は-でかけます。

これだけだとわかりづらいと思うので、上の例と照らしあわせて、確認してみてください。

オプション

複雑なUMLがかけるように、オプションがあります。

自分が実際に使った、オプションについて説明します。

⇒の方向を左右か上下かの設定

direction: 'LR' or 'TB'をyUMLの引数に指定します。 何もしていないと、デフォルトです。 デフォルトがどう定まるのかyUMLでも試してみましたが、条件は特定できませんでした。 基本は左右です。

⇒の形とコメント

  • 点線にする場合
    - の代わりに-.-にします。
  • コメント
    []-の間に文字をかけばいけます。

  • >を付ける場合
    -[]の間に>or<を加えます。(コメントを入れる場合は、コメントと-の間です。)

  • をクラス図にする場合
    [User|+Forenae;+Suranme]と書きます。

  • 形の変形
    (type: 'activity',sttyle: 'plain')でできます。

まとめ

UMLが簡単にかけることがわかって嬉しいです。 人にプログラムの内容を説明する事が多いので、こうした簡単にかけるツールがあるのはとてもいいです。