シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態図 オブジェクト図 配置図 タイミング図 Regex Network Wireframe Archimate Gantt MindMap WBS EBNF JSON YAML
PlantUML Advanced usage SVG Support

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 仕様を参照すると、次のオプションがあります：

デフォルト設定は_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>

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

使用例

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

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

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

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

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

例

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

参考文献

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:

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

Reference:

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

Edit in DokuwikiEdit in AsciidocEdit in Markdown
Option for SVG [svgTitle, svgDesc]

You can add <title> and <desc> tags on SVG output by using svgTitle and svgDesc options:

🎉 Copied! 

@startuml
!option svgTitle "This is the title"
!option svgDesc "This is the description"

alice -> bob: hello
@enduml

[Ref. GH-2292]