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

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

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 svgDimensionStylefalse に設定してください。 これにより、ダイアグラムの本質的な要素だけに焦点を当てた、すっきりとした出力が得られます。

@startuml
skinparam svgDimensionStyle false

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

[参照QA-7334]。

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"

参考文献


Privacy Policy      Advertise