Multilingual Wiki Documentation

スケーラブル・ベクタ・グラフィックス（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ガイドで設定方法をご覧ください。

Scalable Vector Graphics (SVG) is a graphical format renowned for its scalability, ensuring that your diagrams maintain their quality at any zoom level, providing an optimal printing result. In this guide, we delve into how you can enable SVG generation with PlantUML, exploring various settings and directives that enhance your SVG output.

PlantUML offers multiple avenues to enable SVG generation, each catering to different environments. Here, we outline the methods available:

Command Line

Utilize the -tsvg flag with the PlantUML command line to enable SVG generation. Learn more about this in our command line guide.

Ant Task

Incorporate the format="svg" setting in your Ant task definition to facilitate SVG generation. Find detailed instructions in our Ant task guide.

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

Java

You can also generate SVG directly from Java. Discover how to set this up in our Java API guide.

出力の様々な側面をカスタマイズできる特定のスキン・パラメータで 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]。

Enhance your SVG diagrams with specific skin parameters that allow you to customize various aspects of the output. Here we delve into some of the parameters you can use:

svgLinkTarget

The svgLinkTarget setting allows you to modify the target attribute in the hyperlinks generated in the SVG output, thereby controlling how the links will open when clicked.

Referencing the HTML specification, you have the following options:

• _blank: Opens the link in a new window or tab
• _parent: Opens the link in the parent frame
• _self: Opens the link in the same frame where it was clicked (default setting)
• _top: Opens the link in the full body of the window

The default setting is _top, applied when the svgLinkTarget is left empty.

pathHoverColor

Utilize the skinparam pathHoverColor setting to specify a color that will be applied to links when hovered over with the mouse pointer, enhancing user interaction with your diagrams.

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

[Reference: QA-5453]

svgDimensionStyle

If you prefer not to include the style, width, and height attributes in the SVG output header, set the skinparam svgDimensionStyle to false. This gives you cleaner output, focusing solely on the essential elements of your diagram.

@startuml
skinparam svgDimensionStyle false

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

[Reference QA-7334]

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

Leverage the svgSize pragma directive to define custom sizes for specific SVG elements in your PlantUML diagrams.

Using the svgSize Pragma Directive

The !pragma svgSize <U+hhhhh> XX directive informs PlantUML to assume the size of the <U+hhhhh> element to be equivalent to the 'XX' value specified.

Here are different ways you can use this directive to obtain the ideal setting:

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

Example Usage

Below is an example PlantUML code utilizing the svgSize directive:

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

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

Command-Line Options

You can specify the svgSize pragma using the -P option on the command-line. Remember to:

• Enclose the argument in quotes, especially when it contains spaces.
• Use this option multiple times in a single command, if necessary.

Example

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

References

• Forum QA-12550
• GitHub Issue 582