ホームに戻る

複雑でも編集しやすいPlantUMLの図

PlantUMLのコードをMarkdownのコードブロック(先頭に ```plantumlと書く形式)に貼り付けると、Notes Plusが隣に図を表示します。システム、作業の流れ、アイデアを、持ち運びや確認がしやすいノート内の図として記録できます。

PlantUMLのソースと「Notes Platform Architecture」の構成図を並べたNotes Plus。
ビジュアルエディタにPlantUMLの構成図を表示したNotes Plus。
PlantUMLは、技術図をテキストで記述する言語です。この小さな例はシーケンス図で、矢印ごとに参加者間のメッセージを表します。システム間のやり取りやユーザー操作の流れを記録するのに便利です。

まず plantuml というコードブロックを使い、 @startumlで始め、図の記述を続けて、 @endumlで閉じます。たとえば、 Alice -> Bob: Hello は要求を、 Bob --> Alice: Hi は返答を描きます。ビジュアルモードでは図を、ソースモードでは元のコードを表示します。構文と例は PlantUMLの言語ガイド をご覧ください。

AliceとBobのシーケンス図をビジュアルエディタに表示したNotes Plus。