Edit in DokuwikiEdit in AsciidocEdit in Markdown

Scalable Vector Graphics

Scalable Vector Graphics (SVG) est un format graphique réputé pour son extensibilité, assurant que vos diagrammes conservent leur qualité à n'importe quel niveau de zoom, fournissant un résultat d'impression optimal. Dans ce guide, nous nous penchons sur la façon dont vous pouvez activer la génération SVG avec PlantUML, en explorant les différents paramètres et directives qui améliorent votre sortie SVG.

PlantUML offre de multiples avenues pour activer la génération SVG, chacune s'adaptant à des environnements différents. Ici, nous décrivons les méthodes disponibles :

Ligne de commande

Utilisez le drapeau -tsvg avec la ligne de commande PlantUML pour activer la génération SVG. Pour en savoir plus, consultez notre guide de la ligne de commande.

Ant Task

Incorporez le paramètre format="svg" dans la définition de votre tâche Ant pour faciliter la génération de SVG. Vous trouverez des instructions détaillées dans notre guide des tâches Ant.

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

Java

Vous pouvez également générer des SVG directement à partir de Java. Découvrez comment procéder dans notre guide de l'API Java.

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Paramètres d'habillage spécifiques pour SVG

Améliorez vos diagrammes SVG avec des paramètres d'habillage spécifiques qui vous permettent de personnaliser divers aspects de la sortie. Voici quelques-uns des paramètres que vous pouvez utiliser :

svgLinkTarget

Le paramètre svgLinkTarget vous permet de modifier l'attribut target dans les hyperliens générés dans la sortie SVG, contrôlant ainsi la façon dont les liens s'ouvriront lorsqu'ils seront cliqués.

En référence à la spécification HTML, vous avez les options suivantes :

• _blank :* Ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet
• _parent : Ouvre le* lien dans le cadre parent
• _self : Ouvre le lien dans le* cadre où il a été cliqué (paramètre par défaut)
• _top : Ouvre le lien dans le* corps entier de la fenêtre

Le paramètre par défaut est _top, appliqué lorsque le champ svgLinkTarget est vide.

pathHoverColor

Utilisez le paramètre skinparam pathHoverColor pour spécifier une couleur qui sera appliquée aux liens lorsqu'ils seront survolés par le pointeur de la souris, afin d'améliorer l'interaction de l'utilisateur avec vos diagrammes.

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

[Référence : QA-5453]

svgDimensionStyle

Si vous préférez ne pas inclure les attributs style, width, et height dans l'en-tête de sortie SVG, définissez skinparam svgDimensionStyle à false. Vous obtiendrez ainsi une sortie plus propre, qui se concentrera uniquement sur les éléments essentiels de votre diagramme.

@startuml
skinparam svgDimensionStyle false

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

[Référence QA-7334]

WARNING

 This translation need to be updated. 

WARNING

Edit in DokuwikiEdit in AsciidocEdit in Markdown

Spécifier un pragma pour les SVG

Utiliser la directive pragma svgSize pour définir des tailles personnalisées pour des éléments SVG spécifiques dans vos diagrammes PlantUML.

Utiliser la directive pragma svgSize

La directive !pragma svgSize <U+hhhhh> XX informe PlantUML de supposer que la taille de l'élément <U+hhhhh> est équivalente à la valeur 'XX' spécifiée.

Voici différentes façons d'utiliser cette directive pour obtenir le réglage idéal :

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

Exemple d'utilisation

Vous trouverez ci-dessous un exemple de code PlantUML utilisant la directive svgSize:

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

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

Options de ligne de commande

Vous pouvez spécifier le pragma svgSize en utilisant l'option -P sur la ligne de commande. N'oubliez pas de :

• Mettre l'argument entre guillemets, en particulier lorsqu'il contient des espaces.
• Utiliser cette option plusieurs fois dans une seule commande, si nécessaire.

Exemple

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

Références

• Forum QA-12550
• Issue 582 sur GitHub

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:

• 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