Multilingual Wiki Documentation

You are currently using syntax.
In an attempt to improve PlantUML documentation...
Please do not use this website for your own diagrams.
You can click here and use the online server here for your own documentation.

Wiki Toc    View page history    Add new chapter    Reorder page    Raw


Scalable Vector Graphics

Scalable Vector Graphics

SVGは、スケーラブルな画像フォーマットです。つまり、画像をズームしても劣化がありません。そのため、このフォーマットを使用すると、きれいな印刷結果が得られます。

コマンドライン-tsvgフラグを使用すると、SVGを生成することができます。

もしくは、Antタスク定義format="svg"を使用します。

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

Javaから直接SVGを生成することもできます。
SVG is a graphical format which is scalable. It means that when you zoom an image, you don't lose quality. So this format gives good printing result.

You can enable SVG generation by using -tsvg flag with the command line.

You can also use format="svg" in the Ant task definition.

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

You can also generate SVG directly from Java.

SVGに特有のskinparam

Specific SkinParameter for SVG

svgLinkTarget

svgLinkTargetを使用すると、生成されたSVGのtargetの値を変更できます。

HTMLの仕様に基づいて次の値を選択できます:
  • _blank
  • _parent
  • _self
  • _top (svgLinkTargetが指定されない場合のデフォルト値)

@startuml
skinparam svgLinkTarget _parent
start
:[[http://plantuml.com]];
stop
@enduml

pathHoverColor

skinparam pathHoverColorを使用すると、マウスポインタがリンクに乗っている間の文字色を変更できます。

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

[Ref. QA-5453]

svgDimensionStyle

skinparam svgDimensionStyle falseを使用すると、出力するSVGファイルのヘッダーに、stylewidthheight属性が含まれなくなります。

@startuml
skinparam svgDimensionStyle false

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

[Ref. QA-7334]

svgLinkTarget

You can change the target value in the generated SVG with the svgLinkTarget setting.

According to the HTML specification, you can choose:
  • _blank
  • _parent
  • _self
  • _top (by default, if svgLinkTarget is empty)

@startuml
skinparam svgLinkTarget _parent
start
:[[http://plantuml.com]];
stop
@enduml

pathHoverColor

There is also a setting skinparam pathHoverColor to specify a color change when the mouse pointer goes hover some links.

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

[Ref. QA-5453]

svgDimensionStyle

If you does not want to have the attribut style, width and height on the header of the SVG output, you can set skinparam svgDimensionStyle false.

@startuml
skinparam svgDimensionStyle false

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

[Ref. QA-7334]

SVGに特有のpragma

Specific Pragma for SVG

svgSize

!pragma svgSize <U+hhhhh> XXを使用すると、「<U+hhhhh>の大きさはXXと等しい」ということをPlantUMLに伝えることができます。

このディレクティブを使用して、例えば、

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

のように適切な設定値を探してください。

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

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

コマンドラインで引数-Pを使用してpragmaを指定することもできます。
  • 値に空白が含まれるのでダブルクォートで囲ってください
  • この設定を複数指定することもできます。例:

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

[Refs. QA-12550, issue-582]

svgSize

This directive !pragma svgSize <U+hhhhh> XX tells to PlantUML: "assume that the size of <U+hhhhh> is the same as 'XX' "

You can play with this directive:

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

to find the best setting.

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

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

You can use the -P command-line option to specify the pragma.
  • Put it in quotes because the value includes spaces.
  • You can use it multiple times. Example:

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

[Refs. QA-12550, issue-582]


Please report any bugs to plantuml@gmail.com or here.
This website is still in beta testing.