Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Scalable Vector Graphics

ScalableVector Graphics (SVG) es un formato gráfico conocido por su escalabilidad, que garantiza que sus diagramas mantengan su calidad en cualquier nivel de zoom, proporcionando un resultado de impresión óptimo. En esta guía, profundizamos en cómo puede habilitar la generación de SVG con PlantUML, explorando varias configuraciones y directivas que mejoran su salida SVG.

PlantUML ofrece múltiples vías para habilitar la generación de SVG, cada una de ellas adaptada a diferentes entornos. A continuación, describimos los métodos disponibles:

Línea de comandos

Utilice la bandera -tsvg con la línea de comandos de PlantUML para habilitar la generación SVG. Obtenga más información en nuestra guía de línea de comandos.

Tarea Ant

Incorpore la configuración format="svg" en su definición de tarea Ant para facilitar la generación de SVG. Encontrará instrucciones detalladas en nuestra guía de tareas Ant.

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

Java

También puede generar SVG directamente desde Java. Descubra cómo configurarlo en nuestra guía de la API de Java.

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
Specific Skin Parameters for SVG

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. The example below uses _parent:

Please note that for SVG links to work properly when the SVG is used in a HTML page, you need to embed the resulting SVG content directly in the HTML page, rather than invoking it through an <img> tag.

You may also want to use skinparam topurl (see link) to specify how to resolve relative links.

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]

Edit in Dokuwiki Edit in Asciidoc Edit in Markdown
svgSize Pragma

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 the same as the text 'XX' provided.

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" -Tsvg <file.puml>

References

Edit in Dokuwiki Edit in Asciidoc Edit 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

Edit in Dokuwiki Edit in Asciidoc Edit 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]

Edit in DokuwikiEdit in AsciidocEdit in MarkdownScalable Vector Graphics