Edit in DokuwikiEdit in AsciidocEdit in Markdown

スケーラブル・ベクタ・グラフィックス

スケーラブル・ベクタ・グラフィックス（SVG ）は、そのスケーラビリティで有名な グラフィカル・フォーマットであり、あなたのダイアグラムがどのようなズーム・レ ベルでもその品質を維持することを保証し、最適な印刷結果を提供します。このガイドでは、PlantUML で SVG 生成を有効にする方法を掘り下げ、SVG 出力 を強化するさまざまな設定やディレクティブを探ります。

PlantUML は、SVG 生成を有効にするための複数の手段を提供し、それぞれが異なる 環境に対応しています。

コマンドライン

PlantUML コマンドラインで-tsvg フラグを利用し、SVG 生成を有効にします。

Antタスク

Antタスク定義にformat="svg" 設定を組み込み、SVG生成を容易にします。詳しくはAntタスクガイドをご覧ください。

<target name="main">
  <plantuml dir="./src" format="svg" />
</target>

Java

Javaから直接SVGを生成することもできます。JavaのAPIガイドで設定方法をご覧ください。

Edit in DokuwikiEdit in AsciidocEdit in Markdown

SVG のための特定のスキン・パラメータ

出力の様々な側面をカスタマイズできる特定のスキン・パラメータで SVG 図を強化しましょう。

svgLinkTarget

svgLinkTarget 設定によって、SVG 出力で生成されるハイパーリンクのtarget 属性を変更することができ、それによってクリックされたときにリンクがどのように開くかを制御できます。

HTML 仕様を参照すると、次のオプションがあります：

• _blank ：* リンクを新しいウィンドウまたはタブで開く
• _parent ：リンクを* 親フレームで開く
• _self ：リンクを* クリックしたのと同じフレームで開く（デフォルト設定）
• _top ：

デフォルト設定は_top で、svgLinkTarget が空の場合に適用されます。

pathHoverColor

skinparam pathHoverColor 設定を利用して、マウス・ポインタをリンクに置いたときに適用される色を指定し、ユーザーとダイアグラムのインタラクションを強化します。

@startuml
skinparam pathHoverColor green
class Foo2 [[http://www.yahoo.com/Foo2]] {
  +double[] x
  +double y
}
Foo2 --> Foo3
@enduml

[参照：QA-5453]

svgDimensionStyle

SVG出力ヘッダーにstyle,width,height 属性を含めたくない場合は、skinparam svgDimensionStyle をfalse に設定してください。 これにより、ダイアグラムの本質的な要素だけに焦点を当てた、すっきりとした出力が得られます。

@startuml
skinparam svgDimensionStyle false

component a {
}
component b {
}
a -(0- b
@enduml

[参照QA-7334]。

WARNING

 This translation need to be updated. 

WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Untitled chapter of svg

svgSize

S## VG のための Pragma の指定

PlantUML ダイアグラムの特定の SVG 要素のためのカスタムサイズを定義するために、svgSize pragma### ディレクティブを利用します。 !pragma svgSize <U+hhhhh> XXディレクティブは、PlantUML に <U+hhhhh>

理想的な設定を得るために、このディレクティブを使用できるさまざまな方法を示します：

• !pragma svgSize <U+hhhhh> XX
• !pragma svgSize <U+hhhhh> I

使用例

以下は、svgSize ディレクティブを使用する PlantUML コードの例です：

@startuml
!pragma svgSize <U+1F610> XX

test: text <U+1F610>
test_size45: text <size:45><U+1F610>
@enduml

コマンドラインオプション

コマンドラインで-P オプションを使って、svgSize プラグマを指定することができます。

• 引数を引用符で囲んでください。特に、引数にスペースが含まれる場合は。
• 必要であれば、このオプションを1つのコマンドで複数回使用してください。

例

java -jar plantuml.jar "-PsvgSize=<U+1F610> XX" "-PsvgSize=<U+1F611> I"

参考文献

• フォーラム QA-12550
• GitHub Issue 582

WARNING

 This translation need to be updated. 

WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Interactive SVG

svgInteractive allows you to comprehend better complicated diagrams:

• When you click on a diagram element, all other elements that are not connected to it, are dimmed out.
• When you click the same element twice, all elements are restored to their original visibility.

Try the example interactive.svg, or any of the examples below by opening them in the PlantUML server (remember to select SVG output!)

Reference:

• QA-13350

On Class, Object, UseCase or Deployment diagram

🎉 Copied!

@startuml !pragma svgInteractive true package P { A-->B A-->C } C-->D D-->A E-->F F-->B B-->G @enduml

🎉 Copied!

@startuml !pragma svginteractive true left to right direction skinparam actorStyle awesome actor Guest as g package Professional { actor Chef as c actor "Food Critic" as fc } package Restaurant { usecase "Eat Food" as UC1 usecase "Pay for Food" as UC2 usecase "Drink" as UC3 usecase "Review" as UC4 usecase "Cook" as UC5 } g --> UC1 g --> UC2 g --> UC3 fc -u-> UC4 c -u-> UC5 @enduml

On Sequence diagram

🎉 Copied!

@startuml !pragma svginteractive true Alice -> Bob: Authentication Request alt successful case Bob -> Alice: Authentication Accepted else some kind of failure Bob -> Alice: Authentication Failure group My own label Alice -> Log : Log attack start loop 1000 times Alice -> Bob: DNS Attack end Alice -> Log : Log attack end end else Another type of failure Bob -> Alice: Please repeat end ||| Alice -> Bob : message 1 Alice -> Bob : message 2 Alice -> Bob : message 3 Alice -> Bob : message 4 Alice -> Bob : message 5 Alice -> Bob : message 6 Alice -> Bob : message 7 Alice -> Bob : message 8 Alice -> Bob : message 9 ||| Alice -> Bob : message 10 Alice -> Bob : message 11 Alice -> Bob : message 12 Alice -> Bob : message 13 Alice -> Bob : message 14 Alice -> Bob : message 15 Alice -> Bob : message 16 Alice -> Bob : message 17 Alice -> Bob : message 18 Alice -> Bob : message 19 ||| Alice -> Bob : message 20 Alice -> Bob : message 21 Alice -> Bob : message 22 Alice -> Bob : message 23 Alice -> Bob : message 24 Alice -> Bob : message 25 Alice -> Bob : message 26 Alice -> Bob : message 27 Alice -> Bob : message 28 Alice -> Bob : message 29 @enduml