ChatGPT to generate diagrams/graphs/charts with Mermaid.js.org

Hello folks! I’m looking for a way to make use of ChatGPT for solving business use cases and helping me draw diagrams as well. Let’s see how ChatGPT can speed me up in doing so.

As a senior developer or technical lead, there is no set number of diagrams that are required. The number and types of diagrams will depend on the specific project, the team, and the organization. However, there are some common diagrams that are often used in software development, including:

- Class diagrams

- Sequence diagrams

- State diagrams

- Activity diagrams

- Component diagrams

- Deployment diagrams

- Object diagrams

- Data flow diagrams

- Entity relationship diagrams

- Use case diagrams

It’s important to note that not all of these diagrams will be necessary or useful in every project. The key is to choose the diagrams that best communicate the design and help the team understand the system being built.

For all of the diagrams, I will ask ChatGPT to use Mermaid.js syntax to generate.

About Mermaid.js.org
Mermaid is a simple and easy-to-use library that allows developers to generate diagrams and flowcharts from text or code. It uses a simple syntax to describe the elements in a diagram, making it easy for developers to create and maintain diagrams without having to use a graphical interface.

Mermaid supports several types of diagrams, including flowcharts, sequence diagrams, class diagrams, and Gantt charts. The diagrams generated by Mermaid can be exported to various formats, including PNG, SVG, and PDF.

Mermaid is often used in the documentation, presentations, and other types of technical communication to help explain complex systems and processes in an easy-to-understand manner. It is also commonly used in combination with markdown and documentation generators, like Jekyll and GitBook, to create attractive and informative documentation for software projects.

An example of a simple business use case:

A small software development company wants to build a new project management tool for its clients. The tool will allow clients to create projects, assign tasks to team members, and track the progress of the project.

For this use case, the diagrams that could be useful include the following:

1. Use case diagrams: to capture the high-level interactions between the client and the project management tool.

For this use case diagram, I asked ChatGPT to generate code. The first try gave me the wrong result: I cannot correctly convert the code to a diagram image.

The prompt: 
Remember the sample business use case you just suggested, and also mermaid.js as the library to generate text, is that ok?

Please generate Use case diagrams

The wrong result from ChatGPT

graph LR
  User --> (Create Project)
  User --> (Assign Task)
  User --> (Track Progress)
  (Create Project) --> Project
  (Assign Task) --> Task
  (Track Progress) --> Progress
  Project --> Task
  Task --> Progress
  classify default fill:#f9f,stroke:#333,stroke-width:4px;
  class User,Project, Task,Progress default;

My prompt

a syntax error with the above code, pls regenerate

The corrected result from ChatGPT

graph LR
  User[User] --> createProject[Create Project]
  User --> assignTask[Assign Task]
  User --> trackProgress[Track Progress]
  create-project --> Project[Project]
  assignTask --> Task[Task]
  trackProgress --> Progress[Progress]

The result from Mermaid.live

2. Class diagrams: to model the classes of objects in the system, such as projects, tasks, and team members.

Prompt:

Please generate class diagram

Result

Looks like there’s mostly a wrong result on the first try, copy the error from Mermaid and tell ChatGPT to generate again

Correct result:

class diagram
  class User {
    +createProject()
    +assignTask()
    +trackProgress()
  }
  class Project {
    +setTitle(title: String)
    +setDescription(desc: String)
  }
  class Task {
    +setTitle(title: String)
    +setDescription(desc: String)
    +setAssignedTo(assignedTo: User)
  }
  class Progress {
    +setPercentage(percentage: Number)
    +setDate(date: Date)
  }
  User --> Project
  User --> Task
  Task --> Progress

Screenshot from Mermaid.js

3. Sequence diagrams: describe the interactions between the client and the system when performing specific tasks, such as creating a new project.

Prompt:

Please generate sequence diagram

The correct result from ChatGPT (I only post correct one moving on)

sequenceDiagram
  participant User
  participant Project
  participant Task
  participant Progress

  User->>Project: createProject()
  User->>Task: assignTask()
  User->>Progress: trackProgress()
  Task->>Progress: setPercentage(percentage: Number)
  Task->>Progress: setDate(date: Date)

Result from Mermaid.js

4. Activity diagrams: to show the flow of activities within the system, such as moving a task from one state to another (e.g., from “in progress” to “completed”).

!!!ChatGPT cannot generate a correct version for Mermaid.js for this case, I assume Mermaid does not support activities diagram.!!!

Component diagrams: to show the physical components of the system and how they relate to each other.

Prompt:

generate the component diagram for the current business use case using Mermaid

Result from ChatGPT

graph LR
  userInterface[User Interface] --> projectController(Project Controller)
  projectController --> projectRepository(Project Repository)
  projectRepository --> database(Database)

Screenshot from Mermaid.

5. Flowchart:

Prompt:

Generate flowchart

graph LR
  start[Start] --> createProject[Create Project]
  createProject --> assignTask[Assign Task]
  assignTask --> updateTask[Update Task]
  updateTask -->|Yes| closeTask[Close Task]
  updateTask -->|No| assignTask

Mermaid’s screenshot

6. State Diagram

Prompt

generate state diagram

Result from ChatGPT

stateDiagram
  [*] --> ProjectCreated
  ProjectCreated --> TaskAssigned
  TaskAssigned --> TaskInProgress
  TaskInProgress --> TaskCompleted
  TaskCompleted --> TaskClosed
  TaskInProgress --> TaskReassigned
  TaskReassigned --> TaskInProgress

Screenshot of Mermaid

7. Entity Relationship diagram

Prompt

generate Entity Relationship Diagram

erDiagram
  project ->> task : one-to-many
  project ->> user : one-to-many
  user ->> task : many-to-many

Screenshot from Mermaid

So for a few syntaxes, it’s not working for the latest version v9.3.0

8. Gantt chart: to show the timeline with tasks

Prompt

please suggest typical tasks to be done and generate the Gantt chart with 2 months of timeline

gantt
  dateFormat  YYYY-MM-DD
  title A 2-Month Project Timeline

  section Requirements gathering
  Requirements gathering :active, 2019-01-01, 2019-01-14

  section Project planning and design
  Project planning and design :active, 2019-01-15, 2019-01-28

  section System architecture
  System architecture :active, 2019-01-29, 2019-02-11

  section Development of core modules
  Development of core modules :active, 2019-02-12, 2019-03-07

  section Testing and bug fixing
  Testing and bug fixing :active, 2019-03-08, 2019-03-21

  section User interface design
  User interface design :active, 2019-03-22, 2019-04-04

  section Deployment and integration
  Deployment and integration :active, 2019-04-05, 2019-04-18

  section User training and support
  User training and support :active, 2019-04-19, 2019-05-02

  section Documentation
  Documentation :active, 2019-05-03, 2019-05-16

Screenshot from Mermaid

9. Gitgraph

ChatGPT doesn’t update that Mermaid.js already supported Gitgraph hence it cannot generate it.

10. User Journey

ChatGPT doesn’t update that Mermaid.js already supported User Journey hence it cannot generate it.

Conclusion

I’m happy that ChatGPT does help me to generate a Sequence Diagram and Class Diagram. ChatGPT even can suggest to me the typical tasks for a given 2 months timeline and generate the Gantt Chart. However, its training data is not up-to-date with a lot of tools out there — Mermaid.js is an example, hence the effort to have good prompts and work around. But I’m sure with the help of chatbots like ChatGPT, our developer life would be much easier.

Thank you for reading and feel free to let us know if ChatGPT does work with the diagram I tried at the time you’re reading this blog post.