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 LibreOffice 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 file • 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 file GraphViz Basics Dot command line interface • Most frequently used syntax: • dot -T<format> <inputFile> -o <outputFile> • Example • dot -Tpng src/graphviz.dot -o target/graphviz.png Demo Styling Nodes Styling Nodes • Syntax • <nodeId> [<key1>=<value1>, <key2>=<value2>, ...] • 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 • <Source Node ID> -> <Target Node ID> [<key1>=<value1>, <key2>=<value2>, ...] • 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.