# PlantUML diagrams > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/help/writerside/llms.txt). Writerside supports adding diagrams using [PlantUML](https://plantuml.com/). Besides various UML diagrams, you can visualize JSON and YAML, create Gantt charts and mind maps, and many other types of diagrams. To add a PlantUML diagram, use a [code block](code.html) with the language set to `plantuml`: Semantic markup: ```XML @startuml Bob->Alice : Hello! @enduml ``` Markdown: ```PLAINTEXT ```plantuml @startuml Bob->Alice : Hello! @enduml ``` ``` The result will look as follows: ```PLANTUML @startuml Bob->Alice : Hello! @enduml ``` ## Reference PlantUML diagram from file If you have a file with PlantUML code, you can reference it instead of copying the PlantUML code into the code block. For more information, see [Reference code from file](code.html#reference-code-from-file). Semantic markup: ```XML ``` Markdown: ```PLAINTEXT ```PlantUML ``` { src="graph.puml" } ``` Or via a relative path: Semantic markup: ```XML ``` Markdown: ```PLAINTEXT ```PlantUML ``` { src="../codeSnippets/graph.puml" } ``` ## Examples Here are a couple of examples: ### Class diagram ```PLANTUML @startuml left to right direction class User { id : INTEGER .. other_id : INTEGER } class Email { id : INTEGER .. user_id : INTEGER address : INTEGER } User::id *-- Email::user_id @enduml ``` ```PLAINTEXT @startuml left to right direction class User { id : INTEGER .. other_id : INTEGER } class Email { id : INTEGER .. user_id : INTEGER address : INTEGER } User::id *-- Email::user_id @enduml ``` For more examples of class diagrams, see [https://plantuml.com/class-diagram](https://plantuml.com/class-diagram) ### Use case diagram ```PLANTUML @startuml User << Human >> :Main Database: as MySql << Application >> (Start) << One Shot >> (Use the application) as (Use) << Main >> User -> (Start) User --> (Use) MySql --> (Use) @enduml ``` ```PLAINTEXT @startuml User << Human >> :Main Database: as MySql << Application >> (Start) << One Shot >> (Use the application) as (Use) << Main >> User -> (Start) User --> (Use) MySql --> (Use) @enduml ``` For more examples of use case diagrams, see [https://plantuml.com/use-case-diagram](https://plantuml.com/use-case-diagram) ### JSON data ```PLANTUML @startjson { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @endjson ``` ```PLAINTEXT @startjson { "fruit":"Apple", "size":"Large", "color": ["Red", "Green"] } @endjson ``` For more examples of JSON data diagrams, see [https://plantuml.com/json](https://plantuml.com/json) ### Gantt chart ```PLANTUML @startgantt [Prototype design] requires 15 days [Test prototype] requires 10 days -- All example -- [Task 1 (1 day)] requires 1 day [T2 (5 days)] requires 5 days [T3 (1 week)] requires 1 week [T4 (1 week and 4 days)] requires 1 week and 4 days [T5 (2 weeks)] requires 2 weeks @endgantt ``` ```PLAINTEXT @startgantt [Prototype design] requires 15 days [Test prototype] requires 10 days -- All example -- [Task 1 (1 day)] requires 1 day [T2 (5 days)] requires 5 days [T3 (1 week)] requires 1 week [T4 (1 week and 4 days)] requires 1 week and 4 days [T5 (2 weeks)] requires 2 weeks @endgantt ``` For more examples of Gantt charts, see [https://plantuml.com/gantt-diagram](https://plantuml.com/gantt-diagram) ### Mind map ```PLANTUML @startmindmap * root node * some first level node * second level node * another second level node * another first level node @endmindmap ``` ```PLAINTEXT @startmindmap * root node * some first level node * second level node * another second level node * another first level node @endmindmap ``` For more examples of mind maps, see [https://plantuml.com/mindmap-diagram](https://plantuml.com/mindmap-diagram) ## Troubleshooting Here are some possible issues that you might encounter and how to fix them: Cannot find Graphviz : In the rendered output, you see the following message: : : : : : : : ```PLAINTEXT : Dot Executable: /opt/local/bin/dot : Dot executable does not exist : Cannot find Graphviz. You should try : : @startuml : testdot : @enduml : : or : : java -jar plantuml.jar -testdot : ``` : : : : : : PlantUML uses [Graphviz/DOT](https://plantuml.com/graphviz-dot) to compute node positioning for some UML diagrams. If you see the previous message in your rendered output, it means that the machine where you are building the topic files does not have [Graphviz](https://graphviz.org/). : : : : Install Graphviz as described in the [installation guide](https://graphviz.org/download/). Syntax Error : For XML topics or when using [semantic](markup-reference.html#semantic) code blocks in MD topics, make sure there are no `<` and `>` characters in the PlantUML code. You can either wrap the whole contents of the code block in a `CDATA` section to interpret it literally or use character references: `<` and `>`. : : : : : : Broken syntax: : : : : ```XML : : : @startuml : User << Human >> : @enduml : : : ``` : : : : Wrap with CDATA: : : : : ```XML : : > : @enduml : ]]> : : ``` : : : : Use references: : : : : ```XML : : : @startuml : User << Human >> : @enduml : : : ``` : : : : : : : > **Tip:** : > Writerside has an action to wrap the contents of a code block with `CDATA`: put the caret in a code block, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), and select Wrap inner elements with CDATA. No variables : By default, Writerside ignores [variables](variables.html) in PlantUML code and renders them literally. If you want to add something like a version via a variable defined in your project, set `ignore-vars="false"`. : : : : : : : : Variables ignored by default: : : : : ```XML : : : : : @startuml : [Component] --> "Interface %v1%" : [Component] --> "Interface %v2%" : @enduml : : ``` : : : : : : : ```PLANTUML : @startuml : [Component] --> "Interface %v1%" : [Component] --> "Interface %v2%" : @enduml : ``` : : : : Variables properly resolved: : : : : ```XML : : : : : @startuml : [Component] --> "Interface %v1%" : [Component] --> "Interface %v2%" : @enduml : : ``` : : : : : : : ```PLANTUML : @startuml : [Component] --> "Interface 1.0" : [Component] --> "Interface 2.0" : @enduml : ```