ホーム 新着情報 入門 Online Server 実行方法 F.A.Q. ダウンロード フォーラム(英語) Theme 前処理 標準ライブラリ Hitchhiker's Guide PDFガイド
PlantUML Language specification Defining and using sprites

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スプライトの定義と使用

スプライトとは、図の中で使用できる小さい画像のことです。

PlantUMLでは、モノクロで4、8、16段階のグレースケールが使えます。

スプライトの定義は、ピクセルごとに0～Fの16進数を使用します。

その後、<$XXX>の形式でスプライトが使用できます。XXXはスプライトの名前が入ります。 where XXX is the name of the sprite.

🎉 Copied! 

@startuml
sprite $foo1 {
  FFFFFFFFFFFFFFF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  FFFFFFFFFFFFFFF
}
Alice -> Bob : Testing <$foo1>
@enduml

スプライトの倍率を変えることができます。

🎉 Copied! 

@startuml
sprite $foo1 {
  FFFFFFFFFFFFFFF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  FFFFFFFFFFFFFFF
}
Alice -> Bob : Testing <$foo1{scale=3}>
@enduml

WARNING
 This translation need to be updated. 
WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Inline SVG sprite

You can also use inlined SVG for sprites.

Only a tiny subset of SVG directives is possible, so you probably have to compress existing SVG files using https://vecta.io/nano. [Ref. GH-1066]

🎉 Copied! 

@startuml
sprite foo1 <svg width="8" height="8" viewBox="0 0 8 8">
<path d="M1 0l-1 1 1.5 1.5-1.5 1.5h4v-4l-1.5 1.5-1.5-1.5zm3 4v4l1.5-1.5 1.5 1.5 1-1-1.5-1.5 1.5-1.5h-4z" />
</svg>

Alice->Bob : <$foo1*3>
@enduml

Another example:

🎉 Copied! 

@startuml
sprite foo1 <svg viewBox="0 0 36 36">
<path fill="#77B255" d="M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v28z"/>
<path fill="#FFF" d="M21.529 18.006l8.238-8.238c.977-.976.977-2.559 0-3.535-.977-.977-2.559-.977-3.535 0l-8.238 8.238-8.238-8.238c-.976-.977-2.56-.977-3.535 0-.977.976-.977 2.559 0 3.535l8.238 8.238-8.258 8.258c-.977.977-.977 2.559 0 3.535.488.488 1.128.732 1.768.732s1.28-.244 1.768-.732l8.258-8.259 8.238 8.238c.488.488 1.128.732 1.768.732s1.279-.244 1.768-.732c.977-.977.977-2.559 0-3.535l-8.24-8.237z"/>
</svg>

Alice->Bob : <$foo1>

@enduml

You can also use rotation:

🎉 Copied! 

@startuml
sprite react <svg viewBox="0 0 230 230">
<circle cx="115" cy="115" r="20.5" fill="#61dafb"/>
<ellipse rx="110" ry="42"  cx="115" cy="115" stroke="#61dafb" stroke-width="10" fill="none"/>
<ellipse rx="110" ry="42"  cx="115" cy="115" stroke="#61dafb" stroke-width="10" fill="none" transform="rotate(60 115 115)"/>
<ellipse rx="110" ry="42"  cx="115" cy="115" stroke="#61dafb" stroke-width="10" fill="none" transform="rotate(120 115 115)"/>
</svg>

rectangle <$react{scale=0.2}>
@enduml

And you can use color:

🎉 Copied! 

@startuml
sprite react <svg viewBox="0 0 230 230">
<circle cx="115" cy="102" r="20.5" fill="#61dafb"/>
<ellipse rx="110" ry="42"  cx="115" cy="102" stroke="#ff0000" stroke-width="10" fill="none"/>
<g transform="rotate(100 115 102)">
<ellipse rx="110" ry="42"  cx="115" cy="102" stroke="#00ff00" stroke-width="10" fill="none"/>
</g>
<g transform="rotate(-100 115 102)">
<ellipse rx="110" ry="42"  cx="115" cy="102" stroke="#0000ff" stroke-width="10" fill="none"/>
</g>
</svg>

rectangle <$react{scale=1}>
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
色の変更

スプライトはモノクロですが、色を変更することが可能です。

🎉 Copied! 

@startuml
sprite $foo1 {
  FFFFFFFFFFFFFFF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  F0123456789ABCF
  FFFFFFFFFFFFFFF
}
Alice -> Bob : Testing <$foo1,scale=3.4,color=orange>
@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スプライトへの変換

次のコマンドで、スプライトをエンコードできます： 

java -jar plantuml.jar -encodesprite 16z foo.png

foo.pngは使用したい画像です（自動的にグレースケールに変換されます）

-encodespriteに続けて、形式を指定します。 4、8、16、4z、8z、16zが使用可能です。

数値はグレースケールの段階数を表します。zを付けるとスプライトの定義を圧縮することができます。

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スプライトをインポートする

GUIを起動して、既存の画像からスプライトを生成することもできます。

メニューバーのFile/Open Sprite Windowをクリックします。

クリップボードに画像をコピーすると、それに対応したスプライトの定義がいくつか表示されます。その中から必要なものを選択してください。

Edit in DokuwikiEdit in AsciidocEdit in Markdown
例

🎉 Copied! 

@startuml
sprite $printer [15x15/8z] NOtH3W0W208HxFz_kMAhj7lHWpa1XC716sz0Pq4MVPEWfBHIuxP3L6kbTcizR8tAhzaqFvXwvFfPEqm0
start
:click on <$printer> to print the page;
@enduml

🎉 Copied! 

@startuml
 sprite $bug [15x15/16z] PKzR2i0m2BFMi15p__FEjQEqB1z27aeqCqixa8S4OT7C53cKpsHpaYPDJY_12MHM-BLRyywPhrrlw3qumqNThmXgd1TOterAZmOW8sgiJafogofWRwtV3nCF
 sprite $printer [15x15/8z] NOtH3W0W208HxFz_kMAhj7lHWpa1XC716sz0Pq4MVPEWfBHIuxP3L6kbTcizR8tAhzaqFvXwvFfPEqm0
 sprite $disk {
   444445566677881
   436000000009991
   43600000000ACA1
   53700000001A7A1
   53700000012B8A1
   53800000123B8A1
   63800001233C9A1
   634999AABBC99B1
   744566778899AB1
   7456AAAAA99AAB1
   8566AFC228AABB1
   8567AC8118BBBB1
   867BD4433BBBBB1
   39AAAAABBBBBBC1
}

 title Use of sprites (<$printer>, <$bug>...)

 class Example {
 Can have some bug : <$bug>
 Click on <$disk> to save
 }

 note left : The printer <$printer> is available

@enduml

Edit in DokuwikiEdit in AsciidocEdit in Markdown
StdLib

PlantUML StdLibには、アーキテクチャ、クラウドサービス、ロゴなどの様々なIT関連のアイコンが含まれています。そこにはAWS、Azure、Kubernetes、C4、プロダクトロゴなどが含まれます。これらのライブラリを検索するには：

Edit in DokuwikiEdit in AsciidocEdit in Markdown
スプライトを一覧表示する

listspritesコマンドを使って、スプライトの一覧を表示できます：
  • これ単体で使用すると、ArchiMateスプライトの一覧を表示します。
  • 図中に何らかのスプライトライブラリをインクルードしている場合、このコマンドはそれらのスプライトの一覧を表示します。View all the icons with listspritesに説明があります。

(Hitchhikers Guide to PlantUMLからの例)

🎉 Copied! 

@startuml

!define osaPuml https://raw.githubusercontent.com/Crashedmind/PlantUML-opensecurityarchitecture2-icons/master
!include osaPuml/Common.puml
!include osaPuml/User/all.puml

listsprites
@enduml

多くのコレクションはallというファイルを含んでいて、コレクション全体を一度に見ることができます。 もしくは、必要なスプライトを一つずつ探してインクルードします。 残念ながら、StdLibに含まれるコレクションのバージョンにはallファイルが含まれていないものも多いので、上で見たようにStdLibからではなく、githubからインクルードしています。

スプライトはすべてグレースケールですが、ほとんどのコレクションには適切な色を含んだマクロが定義されています。

WARNING
 This translation need to be updated. 
WARNING

Privacy Policy      Advertise