PlantUML and Graphviz How to Create Diagrams from Text

Dmitrii Pisarenko, Denis Savenko, 2021-01-15 Agenda

1. Basic Diagrams using Graphviz

2. PlantUML for Java Developers

3. PlantUML for Database Developers Benefit of using PlantUML/GraphViz Why not just use LibreOfce Draw?

• You can concentrate on the content • Leave the less important aspects to the machine • Layout • You can easily create code that generates diagrams • Just create a text fle • Example: Doxygen uses GraphViz to create class diagrams • https://www.doxygen.nl/index.html Basic Diagrams using Graphviz GraphViz

• https://graphviz.org • Open Source Project • Developed by AT&T around 1991 • dot: Tool for drawing directed graphs • Generates images from text GraphViz Basics GraphViz Basics GraphViz Dot Language

• Documentation • Introduction: https://graphviz.org/doc/info/lang.html • Reference: https://graphviz.org/doc/info/attrs.html • Minimal GraphViz Dot fle GraphViz Basics Dot command line interface

• Most frequently used syntax: • dot -T -o • Example • dot -Tpng src/graphviz.dot -o target/graphviz.png Demo Styling Nodes Styling Nodes

• Syntax • [=, =, ...] • Example • A [label="Foo"] • Full list of attributes available https://graphviz.org/doc/info/attrs.html • Supported shapes: https://www.graphviz.org/doc/info/shapes.html Demo Styling Edges Styling Edges

• Syntax • -> [=, =, ...] • Example • N1 -> N3 [label="Supports", style=filled, color=green] Demo Subgraphs Subgraphs

• Subgraphs allows to place nodes close to each other Demo PlantUML for Java Developers PlantUML

• https://plantuml.com Demo: Sequence Diagram pu-seq.plantuml Demo: Class Diagram pu-class.plantuml Demo: Activity Diagram pu-act.plantuml Wireframe Diagram

• Alternative to • Evolus Pencil (free): https://pencil.evolus.vn • Balsamiq (pleasant): https://balsamiq.com • Mockup as a code Demo: Wireframe pu-wf.plantuml PlantUML for Database Developers Demo: Entity-Relationship Diagram pu-er.plantuml Thank you for your attention