UML Diagrams For Productivity and Clarity

Following up on the last two entries regarding using Python to interact with Oracle MySQL and Oracle Linux, I want to introduce a tool called PlantUML, which is a fantastic tool for creating visual aids to help your development journey, and we will create a simple UML diagram for the Python UI that we discussed in the last entry, for monitoring various services. We will also take a look at a couple of Class Diagrams for a couple of Kafka Consumer and Producer services.

Before getting to the diagram and the UML code, let's talk about how to run PlantUML locally on your machine using VS Code.

VS Code

Install VS code, it’s free.

https://code.visualstudio.com/download

Plant UML Extension

In VS code, go to the extensions marketplace, and install the PlantUML Extension.

You also need to have Java JRE on your machine, install that as well from: https://www.java.com/en/download/manual.jsp

Diagram Previews

To use it, create a new text file in VS Code, and then select PlantUml as the language. Then paste the UML code, and hit “alt + d”, to open the preview screen. You can then copy images.

Now, let's look at some examples, including one following up on our Python Monitoring UI referenced in the last blog entry.

UI Diagram

@startuml

!define RECTANGLE_SIZE_SIZE_RECTANGLE 12

skinparam componentStyle rectangle

skinparam rectangle {

  BackgroundColor<<main>> LightGray

  BackgroundColor<<option>> White

  BorderColor<<main>> Black

  BorderColor<<option>> Gray

}

rectangle "Python UI - Homepage" <<main>> {

    rectangle "Kafka Status" <<option>> 

    rectangle "Zookeeper Status" <<option>> 

    rectangle "MySQL Status" <<option>> 

    rectangle "Map View" <<option>> 

}

@enduml

Class Diagram - Consumer

Diagram depicting a consumer service in a Kafka architecture for a vehicle telemetry system.

@startuml

class KafkaConsumer {

    +consumeMessage()

    +parseJSON(String message)

    +processData(SchoolBusData busData)

}

class SchoolBusData {

    +happenedAtTime: String

    +assetId: String

    +latitude: float

    +longitude: float

    +headingDegrees: int

    +accuracyMeters: float

    +gpsSpeedMetersPerSecond: float

    +ecuSpeedMetersPerSecond: float

}

class DatabaseConnector {

    +insertSchoolBusData(SchoolBusData busData)

}

KafkaConsumer --> SchoolBusData : Parses

KafkaConsumer --> DatabaseConnector : Inserts into

DatabaseConnector --> MySQLDatabase : Stores

 

class MySQLDatabase {

    +save()

}

@enduml

Class Diagram - Producer

@startuml

class KafkaProducer {

    +produceMessage()

    +serializeToJSON(SchoolBusData busData)

    +sendToKafka(String jsonMessage)

}

class SchoolBusData {

    +happenedAtTime: String

    +assetId: String

    +latitude: float

    +longitude: float

    +headingDegrees: int

    +accuracyMeters: float

    +gpsSpeedMetersPerSecond: float

    +ecuSpeedMetersPerSecond: float

    +generateSampleData(): SchoolBusData

}

KafkaProducer --> SchoolBusData : Generates

KafkaProducer --> KafkaTopic : Sends message

class KafkaTopic {

    +receiveMessage(String jsonMessage)

}

@enduml

These are a couple of types of diagrams that you can create using PlantUML in VS Code, in another entry we will be covering a couple of different diagrams, including a sequence diagram, regarding a proposed architecture for getting data out of Oracle Fusion Cloud.