Use AI to create/generate charts/diagrams using Mermaid

I have spent several months experimenting with AI and AI-assistants, including OpenAI ChatGPT and LLM for example.

There are so many different ways AI can help improve productivity, efficiency, accuracy, and accelerate processes by acting as a pilot or AI power Assistant. The outcomes, or work product/outputs are generally better content and deliverables.

The are many different use cases for charts/diagrams, but within business operations, engineering, and software development, most of them are within relationships, sequence, components, data flows, and activity just to name a few of them.

I used ChatGPT to help me generate the code, that I will use will use within the code section of the Mermaid Live Editor

Switching over to ChatGPT for a moment, suppose I want to create/generate simple project/gantt chart. The prompt may look something like this.

Prompt

Please suggest typical tasks to be done and generate the Gantt chart with 2 months of timeline using mermaid.js

Output

Sure! Here are some typical tasks that can be included in a project:

1. Project Planning
2. Requirement Gathering
3. Design and Wireframing
4. Development
5. Testing and Quality Assurance
6. Deployment
7. Documentation
8. User Acceptance Testing
9. Bug Fixes and Enhancements
10. Project Closure

Now, let's generate a Gantt chart with a 2-month timeline using Mermaid.js:

gantt
dateFormat YYYY-MM-DD
title Project Timeline

section Project Planning
Project Planning :done, des1, 2023-07-01, 7d

section Development
Requirement Gathering :active, des2, 2023-07-08, 5d
Design and Wireframing : des3, 2023-07-13, 7d
Development : des4, 2023-07-20, 14d
Testing and QA : des5, 2023-08-03, 10d

section Deployment
Deployment : des6, 2023-08-13, 3d
Documentation : des7, 2023-08-16, 5d

section User Acceptance Testing
UAT : des8, 2023-08-21, 7d

section Bug Fixes and Enhancements
Bug Fixes and Enhancements : des9, 2023-08-28, 7d

section Project Closure
Project Closure : des10, 2023-09-04, 3d

This Gantt chart provides an overview of the project tasks and their durations. It includes sections for Project Planning, Development, Deployment, User Acceptance Testing, Bug Fixes and Enhancements, and Project Closure. You can modify the task names, durations, and start dates according to your specific project requirements.

Now let's head over to Mermaid Live Editor and copy a portion of the output from ChatGPT to Mermaid Live under code, this will generate our project chart.

gantt
  dateFormat  YYYY-MM-DD
  title Project Timeline

  section Project Planning
  Project Planning         :done,    des1, 2023-07-01, 7d

  section Development
  Requirement Gathering    :active,  des2, 2023-07-08, 5d
  Design and Wireframing   :         des3, 2023-07-13, 7d
  Development              :         des4, 2023-07-20, 14d
  Testing and QA           :         des5, 2023-08-03, 10d

  section Deployment
  Deployment               :         des6, 2023-08-13, 3d
  Documentation            :         des7, 2023-08-16, 5d

  section User Acceptance Testing
  UAT                      :         des8, 2023-08-21, 7d

  section Bug Fixes and Enhancements
  Bug Fixes and Enhancements :      des9, 2023-08-28, 7d

  section Project Closure
  Project Closure          :         des10, 2023-09-04, 3d