UML の記述 (PlantUML)

Snow Flower Text は PlantUML 言語によるUMLの作図をサポートしています。 独自のPlantUML 改良エンジンを内蔵しており追加のインストールなしにすべてのUMLの作図機能の利用を始めることができます。

PlantUMLはプレーンテキスト言語からUMLダイアグラムを作成できるオープンソースのツールです。PlantUMLはUMLダイアグラムを盲目のソフトウェアエンジニアにも読むことができるように設計され、PlantUML言語は人間が読み取り可能なプレーンテキストになっています。

使い方

AsciiDoc の [plantuml] ブロックに PlantUML シンタックスを記述することで UML を文書に埋め込む事ができます。

  1. シンタックスに AsciiDoc を選択します。

  2. PlantUML の記述には plantuml ブロックを使用します。メニュ > 挿入 > UML のメニューからPlantUMLのテンプレートを文書に挿入できます。

[plantuml]
--------------------------------------------
@startuml

class Node
class Parent

Node <-- Parent
Parent <-- Region
Region <-- Pane
Node <-- Shape

@enduml
--------------------------------------------
簡単な例

PlantUML の文法の詳細は “PlantUML 言語リファレンスガイド” を参照してください。

レイアウト方法

PlantUML は明示的なレイアウトを必要としませんが、 配置方向をコントロールする方法が用意されています。

デフォルトのレイアウト方向は 上から下となっています。 レイアウトの方向を 左から右に変更する場合は left to right direction コマンドを使用します。

[plantuml]
--------------------------------------------
@startuml

left to right direction

class Node
class Parent

Node <-- Parent
Parent <-- Region
Region <-- Pane
Node <-- Shape


@enduml
--------------------------------------------

関係に配置方向を指定することで個別にコントロールする事ができます。配置方向は次のキーワードで指定します。

up, u

上方向

down, ,do, d

下方向

left, le, l

左方向

right, ri, r

右方向

[plantuml]
---------
@startuml

Actor -u- (Up)
Actor -l- (Left)
Actor -r- (Right)
Actor -d- (Down)

@enduml
---------

キャプションの記述方法

図にキャプションを付ける場合、 PlantUML 言語で caption コマンドを使用することでキャプションを図に付けることが出来ますが、 AsciiDoc 文書ではこの方法は推奨しません。 AsciiDocの記法でキャプションを指定する方が文書全体のデザインを統一できるのでAsciiDoc の記法で記述する方法を推奨します。

以下はPlantUML でキャプションを記述する単純な例です。

[plantuml]
----------------------------------------
@startuml

caption Caption
...

@enduml
----------------------------------------

次の例のように PlantUML でキャプションのスタイルを文書のスタイルと統一しようとすると記述が煩雑になります。

[plantuml]
----------------------------------------
@startuml

caption <i><color:#700>Chain-of-responsibility</color></i>
...

@enduml
----------------------------------------

次のようにキャプションはAsciiDoc の記法を使用することで記述が簡潔になります。

.Chain-of-responsibility
[plantuml]
----------------------------------------
@startuml

...

@enduml
----------------------------------------
Chain-of-responsibility

スキンのカスタマイズ方法

PlantUML で生成される図の配色やフォントファミリー、フォントサイズを変更したい場合は、skinparamコマンドを使うことで変更が出来ます。

モノクローム化

シンプルなモノクロームの配色を使用したい場合には、 ‘skinparam monochrome true’ のコマンド記述で すべての図の配色を簡単に変更できます。

[plantuml]
--------------------------------------------
@startuml

skinparam monochrome true

...

@enduml
--------------------------------------------
skinparam monochrome true 
[plantuml]
--------------------------------------------
@startuml

skinparam monochrome reverse

...

@enduml
--------------------------------------------
monocrome reverse

背景色の変更

[plantuml]
-------
@startuml
skinparam backgroundColor aliceblue
...
@enduml
-------

フォントの変更

フォントを変更したい場合は、skinparam コマンドで変更できます。フォントを細かく指定することも出来ますが煩雑であるのでデフォルトフォントを指定することで一括してフォントを変更する簡潔な記述方法を推奨します。次のコマンドを指定することでデフォルト・フォントを変更することができます。

skinparam defaultFontname フォント名

フォント名の変更はシステム依存性が高くなりますのでフォントの選び方には注意が必要になります。しかし Web の CSS と同様にフォントのフォールバック動作があるので Webと同様に複数のフォントを指定するアプローチで依存性を軽減できます。この方法は指定したメトリクス互換フォントがない環境でもテキストの幅は表示環境によって自動調整されます。

sans-serif とserif と monotype の例を挙げます。

[plantuml]
-------
@startuml

skinparam defaultFontName "Helvetica Neue, Helvetica,Arial,sans-serif"

...

@enduml
-------
defaultFontname “Helvetica Neue, Helvetica,Arial,sans-serif”
defaultFontName “Georgia,serif”
defaultFontName “Courier, Courier New,monotype”
メトリック互換フォントは メトリクスが一致しているフォントです。メトリクス (文字の大きさ)が一致していることでフォントを置き換えても文書のレイアウトが崩れることはありません。
メトリック互換フォントの組み合わせ例

  • Helvetica, Arial, Liberation Sans

  • Times, Times New Roman, Liberation Serif

  • Courier, Courier New, Liberation Mono

色の指定

PlantUML では Web のCSSと同様に 標準的な色名または RGB HEXコードで色を指定できます。

次の標準的な色名が使用できます。色名は大文字小文字を区別されません。

  • Whites

    • ■ antiquewhite

    • ■ azure

    • ■ bisque

    • ■ blanchedalmond

    • ■ cornsilk

    • ■ oralwhite

    • ■ gainsboro

    • ■ ghostwhite

    • ■ honeydew

    • ■ ivory

    • ■ lavender

    • ■ lavenderblush

    • ■ lemonchiffon

    • ■ linen

    • ■ mintcream

    • ■ mistyrose

    • ■ moccasin

    • ■ navajowhite

    • ■ oldlace

    • ■ papayawhip

    • ■ peachpuff

    • ■ seashell

    • ■ snow

    • ■ thistle

    • ■ wheat

    • ■ white

    • ■ whitesmoke

  • Greys

    • ■ darkslategray

    • ■ dimgray

    • ■ gray

    • ■ gray

    • ■ lightgray

    • ■ lightslategray

    • ■ slategray

  • Blacks

    • ■ black

  • Reds

    • ■ coral

    • ■ crimson

    • ■ darksalmon

    • ■ deeppink

    • ■ rebrick

    • ■ hotpink

    • ■ indianred

    • ■ lightpink

    • ■ lightsalmon

    • ■ maroon

    • ■ mediumvioletred

    • ■ orangered

    • ■ palevioletred

    • ■ pink

    • ■ red

    • ■ salmon

    • ■ tomato

    • ■ violetred

  • Browns

    • ■ beige

    • ■ brown

    • ■ burlywood

    • ■ chocolate

    • ■ darkkhaki

    • ■ khaki

    • ■ peru

    • ■ rosybrown

    • ■ saddlebrown

    • ■ sandybrown

    • ■ sienna

    • ■ tan

  • Oranges

    • ■ darkorange

    • ■ orange

    • ■ orangered

  • Yellows

    • ■ darkgoldenrod

    • ■ gold

    • ■ goldenrod

    • ■ greenyellow

    • ■ lightgoldenrod

    • ■ lightgoldenrodyellow

    • ■ lightyellow

    • ■ palegoldenrod

    • ■ yellow

    • ■ yellowgreen

  • Greens

    • ■ chartreuse

    • ■ darkgreen

    • ■ darkolivegreen

    • ■ darkseagreen

    • ■ forestgreen

    • ■ green

    • ■ greenyellow

    • ■ lawngreen

    • ■ lightseagreen

    • ■ limegreen

    • ■ mediumseagreen

    • ■ mediumspringgreen

    • ■ mintcream

    • ■ olivedrab

    • ■ palegreen

    • ■ seagreen

    • ■ springgreen

    • ■ yellowgreen

    • ■ Cyans

    • ■ aquamarine

    • ■ cyan

    • ■ darkturquoise

    • ■ lightcyan

    • ■ mediumaquamarine

    • ■ mediumturquoise

    • ■ paleturquoise

    • ■ turquoise

  • Blues

    • ■ aliceblue

    • ■ blue

    • ■ blueviolet

    • ■ cadetblue

    • ■ corn

    • ■ owerblue

    • ■ darkslateblue

    • ■ deepskyblue

    • ■ dodgerblue

    • ■ indigo

    • ■ lightblue

    • ■ lightskyblue

    • ■ lightslateblue

    • ■ mediumblue

    • ■ mediumslateblue

    • ■ midnightblue

    • ■ navy

    • ■ navyblue

    • ■ powderblue

    • ■ royalblue

    • ■ skyblue

    • ■ slateblue

    • ■ steelblue

  • Magentas

    • ■ blueviolet

    • ■ darkorchid

    • ■ darkviolet

    • ■ magenta

    • ■ mediumorchid

    • ■ mediumpurple

    • ■ mediumvioletred

    • ■ orchid

    • ■ palevioletred

    • ■ plum

    • ■ purple

    • ■ violet

    • ■ violetred

サンプル

アクティビティ図
クラス図
コンポーネント図
シーケンス図
ステートマシン図
ユースケース図

関連文書

参考

Download on the Mac App Store