Key Points

References

Key Concepts

https://plantuml.com/

plantuml online editor
http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000

plantuml in vscode
https://www.youtube.com/watch?v=xkwJ9GwgZJU

PlantUML in Visual Studio Code

To get started with PlantUML in Visual Studio Code , you first need to install the PlantUML extension in the Visual Studio Code marketplace. To do this, follow these steps:

1. Open Visual Studio Code
2. Click on the Extensions icon in the Activity Bar on the side of the editor
3. Search for “PlantUML” in the extensions marketplace
4. Install the PlantUML extension
5. Restart Visual Studio Code if necessary
6. Once you have installed the PlantUML extension, you are ready to start using PlantUML in Visual Studio Code.

Using PlantUML in Visual Studio Code is straightforward. To create a new PlantUML diagram, simply create a new file with a .puml extension and start writing PlantUML syntax. For example:

https://plantuml.com/commons - common commands in plantuml

plantuml-layout-tutorial-styles. guide

PlantUMLHitchhikersGuide - github

uml_modeling_with_plantuml_a_comprehensive_guide_with_examples - medium

existing plantuml sprites available 

https://crashedmind.github.io/PlantUMLHitchhikersGuide/PlantUMLSpriteLibraries/plantuml_sprites.html

https://crashedmind.github.io/PlantUMLHitchhikersGuide/PassSpriteAsParameter/PassSpriteAsParameter.html

https://crashedmind.github.io/PlantUMLHitchhikersGuide/aws/aws.html

plantuml online editor and viewer

https://sujoyu.github.io/plantuml-previewer/

how to can I reference external image files from a plantuml script in the online plantuml viewer?

plantuml vscode plugin

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

The server render is now very recommended by this extension, since it's much faster and much easier to setup, while the major weakness has been improved:

• Enables POST method, you can now render very-large diagrams
• The extension comes with a new include processor, you won't encounter include problems again.

To make sure you can benifit from this update, make sure your plantuml server enables POST support.

If not, like the official https://www.plantuml.com/plantuml, the extension falls back to use GET, and you may still encounter 414 URI Too Long errors. Setup your own server is recommended.

See also: About Render

Supported Formats

*.wsd, *.pu, *.puml, *.plantuml, *.iuml

How to install

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install plantuml

Requirements for PlantUMLServer render

A plantuml server. See Use PlantUML Server as render.

Requirements for Local render

It's necessary to have following installed:

• Java : Platform for PlantUML running.
• Graphviz : PlantUML requires it to calculate positions in diagram.

Quick Install for Mac

brew install --cask temurin
brew install graphviz

HTLC Ethereum Smart Contracts examples with Plantuml Sequence Diagrams

https://github.com/chatch/hashed-timelock-contract-ethereum

includes tests, Solidity code etc

https://github.com/chatch/hashed-timelock-contract-ethereum/blob/master/docs/sequence-diagram-htlc-erc20-success.plantuml

https://github.com/chatch/hashed-timelock-contract-ethereum/tree/master/contracts

https://plantuml.com/starting

Details for Plantuml Confluence Plugin App

https://skywebteam.atlassian.net/wiki/marketplace/discover/app/com.atlassian.plugins.confluence.markdown.confluence-markdown-macro

Plantuml for C4 Tiers and Layers Diagrams Tutorial

https://www.alibabacloud.com/blog/597426

PlantUML_Language_Reference_Guide.pdf file

Combine Gen AI and Plantuml for Diagramming

1. In a Chrome Browser
2. Define a Gen AI prompt with optional definition files uploaded to create a plantuml diagram
3. Describe the diagram clearly in text 
4. Generate the Plantuml code using Claude.ai or ChatGPT
5. Edit the generated code as needed in a text editor like Sublime
6. Use the Plantuml online viewer to paste the edited code 
   https://sujoyu.github.io/plantuml-previewer/
7. Use the Save and Preview button to view the diagram
8. Open the generated diagram in a new window
9. Save or copy the generated image to use as needed
10. If needed, repeat the process to fine tune the diagram starting with the Plantuml Prompt for Gen AI or the text editor
11. then repeat the online viewer process to see the new resulting diagram image 

Example of a Digital Ecosystem in Plantuml using Gen AI Prompt

Using PlantUML, create 
Create a conceptual system diagram with icons and their relationships ( as connection lines ) by layer that shows 
A Digital Ecosystem with use cases with 
A layer of the key personas ( citizens, tourists, staff, contractors, businesses, government agencies ) with appropriate icons 
A device layer with appropriate icons for mobile devices, laptops, servers for the related personas where each type of device connects directly to 
A communications protocol layer with Wifi, LTE, Open Radio, Satcom capabilities 
Supporting 
A network server layer with edge nodes and cloud nodes in Kubernetes with Tyk API gateway and routing services 
With Edge Node showing direct connections for all protocols and the cloud nodes showing only direct connections for Wifi, LTE 
An authentication and authorization services layer with TrustGrid secure decentralized Digital Identity and Verifiable Credentials Ledger integrated with KeyCloak IAM and SSO 
A communications services layer with TrustGrid secure decentralized messaging (text, files, voice, videos, data ), decentralized p2p data and transaction services and a box for non TrustGrid communications 
An application layer ( ERP management modules: staff, contractor, supplier & procurement, collaboration, analytics & reporting and other applications ( CRM, email etc )
Ensure the background is white. All graph objects ( boxes, lines etc ) have a black border line 
Make the object fill color for the protocol layer all very light blue 
Make the object fill color for ALL the TrustGrid services in all layers and the Edge Nodes all light green 
Make the object fill color for the non TrustGrid authentication layer all very light blue 
Make the object fill color for the non TrustGrid communications layer all very light yellow
Make the object fill color for the application layer all very light gray

Claude.ai response to request to create Plantuml diagram 

I'll create a layered PlantUML diagram with the specified connections and color coding.


Digital Ecosystem with Detailed Connections
Click to open code
I've updated the diagram with:

Improved organization:
Clearer grouping of related components
Better separation between TrustGrid and external services
ERP modules grouped separately from other applications
Color scheme as specified:
TrustGrid services and Edge Nodes: Light green (#90EE90)
Protocol layer: Light blue (#ECEFF1)
External auth services: Light blue (#ECEFF1)
External communications: Light yellow (#FFFDE7)
Applications: Light gray (#F5F5F5)
Connection paths showing:
Direct device-to-protocol relationships
Edge nodes connected to all protocols
Cloud nodes only connected to WiFi and LTE
Clear authentication and service delivery paths
Improved readability:
Orthogonal connection lines
Clearer component grouping
Better spacing between layers
Would you like any adjustments to:

Layer organization
Connection paths
Component grouping
Visual hierarchy?
Copy
Retry


Claude can make mistakes. Please double-check responses.

Claude.ai generated plantuml code for the plantuml prompt request 

@startuml Digital Ecosystem
!theme plain
skinparam backgroundColor white
skinparam DefaultFontColor black
skinparam ArrowColor black
skinparam BoxPadding 40
skinparam linetype ortho

' Custom styling
skinparam rectangle {
BorderColor black
BorderThickness 1
FontSize 14
}

skinparam component {
BorderColor black
BorderThickness 1
}

' Layout direction
top to bottom direction

' Persona Layer
rectangle "Persona Layer" {
rectangle "👥\nCitizens" as citizen #white
rectangle "🌍\nTourists" as tourist #white
rectangle "👔\nStaff" as staff #white
rectangle "🔧\nContractors" as contractor #white
rectangle "🏢\nBusinesses" as business #white
rectangle "🏛️\nGovernment\nAgencies" as gov #white
}

' Device Layer
rectangle "Device Layer" {
component "📱 Mobile Devices" as mobile #white
component "💻 Laptops" as laptop #white
component "🖥️ Servers" as server #white
}

' Communications Protocol Layer
rectangle "Communications Protocol Layer" {
component "📶 WiFi" as wifi #ECEFF1
component "📡 LTE" as lte #ECEFF1
component "🔄 Open Radio" as radio #ECEFF1
component "🛰️ Satcom" as satcom #ECEFF1
}

' Network Server Layer
rectangle "Network Server Layer" {
component "🔄 Edge Nodes" as edge #90EE90
component "☁️ Cloud Nodes" as cloud #white
component "⚙️ Kubernetes\nClusters" as k8s #white
component "🌐 Tyk API\nGateway" as tyk #white
component "🔀 Routing\nServices" as routing #white
}

' Authentication Layer
rectangle "Authentication Layer" {
rectangle "TrustGrid Auth Services" {
component "🔐 TrustGrid Digital\nIdentity" as identity #90EE90
component "📜 TrustGrid Verifiable\nCredentials Ledger" as credentials #90EE90
}
rectangle "External Auth Services" {
component "🔑 KeyCloak IAM" as keycloak #ECEFF1
component "🔒 SSO Services" as sso #ECEFF1
}
}

' Communications Layer
rectangle "Communications Layer" {
rectangle "TrustGrid Communications" {
component "💬 Secure Messaging" as message #90EE90
component "📁 File Services" as file #90EE90
component "📞 Voice/Video" as voice #90EE90
component "📊 Data Services" as data #90EE90
component "🔗 P2P Transaction" as p2p #90EE90
}
rectangle "External Communications" {
component "📧 Legacy Systems" as legacy #FFFDE7
}
}

' Application Layer
rectangle "Application Layer" {
rectangle "ERP Modules" {
component "👥 Staff Management" as staffMgmt #F5F5F5
component "🤝 Contractor Management" as contractorMgmt #F5F5F5
component "📦 Supplier & Procurement" as procurement #F5F5F5
}
rectangle "Other Applications" {
component "🤲 Collaboration Tools" as collab #F5F5F5
component "📊 Analytics & Reporting" as analytics #F5F5F5
component "💼 CRM & Email" as crm #F5F5F5
}
}

' Connections
' Personas to Devices
citizen --> mobile
tourist --> mobile
staff --> laptop
contractor --> laptop
business --> laptop
gov --> laptop

' Devices to Protocols
mobile --> wifi
mobile --> lte
mobile --> satcom
laptop --> wifi
laptop --> lte
server --> radio
server --> satcom

' Protocols to Network Layer
wifi --> edge
wifi --> cloud
lte --> edge
lte --> cloud
radio --> edge
satcom --> edge

' Network Layer Internal
edge --> tyk
cloud --> tyk
tyk --> k8s
k8s --> routing

' Network to Auth
routing --> identity
routing --> credentials
routing --> keycloak
routing --> sso

' Auth to Communications
identity --> message
identity --> file
identity --> voice
identity --> data
identity --> p2p
keycloak --> legacy
sso --> legacy

' Communications to Apps
message --> staffMgmt
file --> contractorMgmt
voice --> procurement
data --> collab
p2p --> analytics
legacy --> crm

@enduml

Generated Plantuml Diagram in the online viewer after pasting the code 

How to add icon image files to replace or add above a text box in Plantuml code 

To replace text boxes with image icons in PlantUML code, you can use the !define directive to define the image and then use <<icon>> in the diagram elements. Here's an example of how to do this:

Example Code for Replacing Text Boxes with Icons in PlantUML

1. Place Your Image in an Accessible Location: First, make sure the image icon file (e.g., PNG or SVG) is accessible. You can use a local file path or a URL.

2. Define and Use the Image: Use the !define directive to load the image, and then assign it to specific elements or classes.

plantuml

plantuml code to use an image file in diagram Expand source

@startuml

!define ICON_PATH https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Iconic_image.svg/600px-Iconic_image.svg.png

actor User <<ICON_PATH>>

rectangle "Main Process" {
User -> (Start)
(Start) --> (Process)
(Process) --> (End)
}

@enduml

Steps:

• !define ICON_PATH allows you to define a URL or local path to the image.
• <<ICON_PATH>> applies the image as an icon for the actor (or any other PlantUML element).
• In this example, an actor (User) is shown with an image icon defined from the URL.

Important Notes:

• You can replace text boxes with images for different diagram elements, including actors, classes, use cases, and more.
• Ensure that the image URL or path is accessible when generating the diagram (e.g., for online rendering or local generation).
• PlantUML supports multiple image formats, including PNG, SVG, and JPEG.

Plantuml formatting examples and tips 

creating multiple pages in 1 diagram spec

PlantUML in Action 009 - 01 Sequence Diagram - 12 grouping message - video

Here's a summarized breakdown of the content on grouping messages in PlantUML sequence diagrams:

1. Grouping Messages: The video explains how to group messages within a sequence diagram using PlantUML keywords to clarify the flow, structure, and execution logic.

2. Key Keywords:

   • alt/else: Represents conditional branches, similar to an "if/else" structure where only one of the blocks executes.
   • opt: Used for optional actions that may or may not occur, offering flexibility in the sequence flow.
   • loop: Represents iterative actions, like loops, that execute multiple times.
   • par: Allows parallel actions, visualized as concurrent message flows.

3. Special Keywords:

   • break: Defines a point to stop the sequence, skipping further messages within the group.
   • critical: Marks an uninterruptible sequence segment, ensuring messages within it execute without interleaving.
   • group: A generic grouping tool that lets you name and nest groups, enhancing organization and clarity.

4. Examples & Structure Tips:

   • For alt/else, structure branches for alternate outcomes, using "else" to define additional conditions.
   • Use opt for optional message flows without compulsory execution.
   • Apply loop to indicate repetitive sequences, specifying the repetition count.
   • Organize par sections for messages that can occur simultaneously.

5. Practical Advice:

   • Always pair end with each grouping keyword (e.g., end alt, end group) to maintain syntax integrity.
   • Use indentation to enhance readability and organize nested groups clearly.

6. Comparison with Other Diagrams: Highlights differences in message grouping between options (optional execution) and alternates (exclusive branches), improving diagram clarity for complex logic.

7. Enhancing Readability: Organizing messages into groups significantly enhances readability and maintains clarity in complex diagrams, especially in collaborative or large-scale UML diagrams.

8. Testing Keywords in Practice: The video encourages viewers to experiment with these keywords in their UML diagramming IDEs to build familiarity with grouping structures in PlantUML.

Potential Value Opportunities

Potential Challenges

Candidate Solutions

Step-by-step guide for Example

sample code block

Recommended Next Steps

Related articles