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.

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]

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

Interactive SVG

Reference

On Class, Object, UseCase or Deployement 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


Privacy Policy      Advertise