Skip to content

Latest commit

 

History

History
311 lines (208 loc) · 8.36 KB

slides-04-use.fr.md

File metadata and controls

311 lines (208 loc) · 8.36 KB

Utilisation

Utilisation - Ligne de commande

:::: columns ::: column

  • Assumant le fichier: my.puml suivant:

    @startuml
A -> B: My message
@enduml

  • Rouler:

    $ plantuml my.puml
# ..

  • Produira l'image my.png suivante:

    my.png \

::: ::: column

  • Comme le montre l'aide en ligne de commande, png n'est pas le seul format de sortie:

    $ plantuml -help
# ...
-tpng               To generate images using PNG format (default)
-tsvg               To generate images using SVG format
-teps               To generate images using EPS format
-tpdf               To generate images using PDF format
-tvdx               To generate images using VDX format
-txmi               To generate XMI file for class diagram
-tscxml             To generate SCXML file for state diagram
-thtml              To generate HTML file for class diagram
-ttxt               To generate images with ASCII art
-tutxt              To generate images with ASCII art using Unicode characters
-tlatex             To generate images using LaTeX/Tikz format
-tlatex:nopreamble  To generate images using LaTeX/Tikz format without preamble
# ..

::: ::::

Utilisation - Ligne de commande (suite)

:::: columns ::: column

  • Ma recommandation en générale est de générer une image svg:

    $ plantuml -tsvg my.puml
# ..
$ ls
my.puml my.svg # ..

    Voici pouquoi:

    • Format vectoriel sans perte / non discrétisé. Vous ne serez pas limité à un affichage à un dpi spécifique.

    • Textuel, donc mieux supporté par git et autres système de gestions de code source.

    • S'ouvre à l'aide de n'importe que navigateur moderne (e.g: firefox ./my.svg).

::: ::: column

  • Voici le résultat:

    my.svg{width=75%} \

  • Bien remarquer également la transparent du fond de l'image contrairement au png.

::: ::::

Utilisation - Makefile

  • On peut en quelques lignes se faire un petit makefile (gnu dans ce cas-ci) permettant de produire des images (*.svg dans ce cas) pour l'ensemble des fichier de code *.puml dans une arborescence de répertoires:

    :::: columns ::: column

    MKF_CWD := $(shell pwd)
OUTPUT_REL_DIR := .
SRC_PUML := $(shell \
	find . -mindepth 1 -type f -name '*.puml' -printf '%P\n')
OUT_SVG_FROM_PUML := $(patsubst \
	%.puml,$(OUTPUT_REL_DIR)/%.svg,$(SRC_PUML))


.PHONY: all clean svg-from-puml clean-svg-from-puml
all: svg-from-puml
clean: clean-svg-from-puml
svg-from-puml: $(OUT_SVG_FROM_PUML)
clean-svg-from-puml:
	rm -f $(OUT_SVG_FROM_PUML)

.SECONDEXPANSION:
$(OUTPUT_REL_DIR)/%.svg : %.puml | $$(@D)/.
	plantuml -tsvg -o "$(MKF_CWD)/$(@D)/" "$<"

    ::: ::: column

    $ make
plantuml -tsvg -o "/my/cwd/./" "AtRoot.puml"
plantuml -tsvg -o "/my/cwd/SubDir/" "SubDir/InSubDir.puml"
$ tree
.
├── AtRoot.puml
├── AtRoot.svg
├── Makefile
└── SubDir
    ├── InSubDir.puml
    └── InSubDir.svg

1 directory, 5 files
    • Un avantage vis-à-vis plantuml -r (mode récursif de PlantUML) c'est qu'on a un bien meilleur contrôle sur les images en sortie (où on les envoi, etc).

    ::: ::::

    • Également, le makefile ne relancera pas la commande si le fichier de source est inchangé.

Utilisation - Extension vscode

:::: columns ::: column Vscode - PlantUML extension - Screenshot{width="100%"}
::: ::: column

  • Vscode - PlantUML extension

    Une extension permettant d'obtenir un preview pane du code plantuml.

    Amène également un support de syntax highlighting pour le code source plantuml.

    • Ouvrir le fichier *.puml, *.iuml ou *.wsd.
    • Mettre votre pointeur à l'intérieur de la zone @start / @end.
    • Alt + D.
    • Un panneau s'ouvrira à droite avec la version rendue de votre diagramme.

  • Une excellent façon d'itérer sur un diagramme.

  • À noter: le panneau se rafraîchit automatiquement lorsque vous éditez le code.

:::

::::

Utilisation - Cloud

Pour tous nos amis qui ont la tête dans les nuages, plusieurs solutions s'offrent à vous:

:::: columns ::: column

PlantText UML Editor - Screenshot{width=100%} \

::: ::: column

::: ::::

Utilisation - Microsoft Word / Open office

:::: columns

::: column

<iframe width="100%" height="500" data-src="https://www.youtube.com/embed/eofooJgjdE0?autoplay=1" allow="autoplay; encrypted-media"> [Demonstration PlantUML Word](https://www.youtube.com/watch?v=eofooJgjdE0) </iframe> :::

::: column

  • On voit ici à gauche la démonstration d'une macro pour l'intégration PlanUML dans Microsoft Word.

    Rappelez vous, c'était l'une des motivation principales de l'auteur.

    PlantUML - Word Add-in

  • Je ne suis pas certain que tout fonctionne encore bien avec Office 365 (puisqu'en ligne), du moins sans avoir à payer une souscription! À essayer avec la version installé.

::: ::::

Utilisation - À même un doc markdown

:::: columns ::: column

Markdown Preview Enhanced - Support PlantUML{width="100%"}

::: ::: column

  • Une extension vscode et atom supportant le rendu de blocs de code PlantUML se trouvant directement dans un fichier markdown (*.md).

    • Support l'import de fichier *.puml externe via la directive @import.
    • Support plusieurs autres types de diagrammes / visualisations.
    • L'intérêt ici c'est de se servir des diagramme pour expliquer quelque chose: le diagramme vient en support au texte.

::: ::::

  • Il est également assez simple d'automatiser workflow en combinant pandoc, PlantUML et un build system au choix (e.g.: gnumake).

    Voir pandoc-md-wiki pour un example d'intégration. Cette présentation en est d'ailleur un example.

Utilisation - Autres