Text To Diagram Using AI
In today’s tutorial, we’ll explore creation of stunning diagrams using ChatGPT, along with the assistance of Mermaid.js and Draw.io.

Use Case:

In the routine course of project management, the development of software architecture and accompanying diagrams is a fundamental aspect to meet client demands. In today’s tutorial, we will elucidate the process of diagram creation utilizing ChatGPT to generate a sample scenario as the foundation for our diagrammatic exploration. So let’s open ChatGPT and type the prompt as follows,
give me a sample usecase for user tasks, timelines and their projects. give all actors with their functions
And here’s an output from ChatGPT,
Actors:

User: The individual utilizing the project management application.
Project Manager: Oversees the planning, execution, and closing of projects.
Team Member: Collaborates on tasks within the projects.
Administrator: Manages user access, permissions, and overall system settings.

Functions:
1. User:
    Creates new projects and assigns team members.
    Sets project goals, objectives, and timelines.
    Creates tasks within projects and assigns them to team members.
    Monitors the progress of tasks and projects through the application dashboard.
    Receives notifications for upcoming deadlines or task updates.
    Communicates with team members through built-in messaging features.
    Provides feedback and updates on task completion.
2. Project Manager:
    Reviews project proposals and determines feasibility.
    Establishes project timelines, milestones, and deliverables.
    Allocates resources and assigns tasks to team members based on their expertise and availability.
    Monitors project progress, identifying any potential risks or delays.
    Adjusts timelines and resource allocation as needed to keep projects on track.
    Communicates with stakeholders to provide project updates and address concerns.
    Provides guidance and support to team members to ensure successful project completion.
3. Team Member:
    Accesses assigned tasks and project details within the application.
    Collaborates with other team members to complete tasks on time.
    Updates task status and provides progress reports.
    Communicates with the project manager and other team members regarding task-related issues or dependencies.
    Participates in meetings or discussions related to project progress or planning.
    Seeks clarification or additional information when necessary to complete assigned tasks effectively.
4. Administrator:
    Manages user accounts, permissions, and roles within the application.
    Configures project templates and settings to align with organizational requirements.
    Monitors system performance and troubleshoots any technical issues.
    Conducts regular backups and ensures data security measures are in place.
    Provides training and support to users on how to effectively use the application.
    Implements updates or enhancements to improve the functionality and usability of the system.

Sample Scenario:

User, a project manager at a software development company, logs into the project management application to oversee the development of a new mobile app. User creates a new project, sets a timeline for completion, and assigns tasks to team members, including developers, designers, and testers.
Throughout the project lifecycle, User monitors the progress of tasks, communicates with team members to address any issues or delays, and adjusts timelines as needed to ensure project milestones are met. Team members regularly update task statuses, provide feedback, and collaborate on various aspects of the project.

The Project Manager reviews the project dashboard to track overall progress, identify any bottlenecks, and make strategic decisions to keep the project on schedule. They communicate with stakeholders to provide updates on project status and address any concerns or feedback.

The Administrator ensures that the project management application is running smoothly, troubleshoots any technical issues, and provides support to users as needed. They also conduct regular maintenance and updates to the system to ensure optimal performance and security.

Throughout the project lifecycle, the project management application facilitates efficient communication, collaboration, and task management, ultimately leading to the successful delivery of the mobile app within the specified timeline.
So, we now have a good to start with diagrams!

Build Mermaid.js script using OpenAI prompt:

Type the prompt,

what is mermaid.js?”.

This is to set the context with ChatGPT that the next set of questions are going to be around mermaid.js. We’ll ignore the result of this text prompt.

Let’s move forward, to generate the mermaid.js for our use case, type the next prompt,

give mermaid.js code for class diagram related to my use case
It will give the following mermaid.js script,

Let’s go to draw.io

Go to draw.io, and it shall create a blank diagram for you by default. Go to Arrange -> Insert -> Advanced -> Mermaid…

 

Copy & Paste the mermaid.js script from ChatGPT into this popup. and click Insert.

 

This is what you get:

Et Voilà, we have our first class diagram! It gives us all actors and its functions, along with the relationships.

This is lot more easier than writing an entire mermaid.js script from scratch. We can now continue to modify this to adjust to our needs and the diagram is ready for us!

Here is the mermaid.js script from ChatGPT –

    class User {
        + createProject()
        + setProjectGoals()
        + createTask()
        + monitorProgress()
        + receiveNotifications()
        + communicateWithTeam()
        + provideFeedback()
    }
    class ProjectManager {
        + reviewProjectProposals()
        + establishTimelines()
        + allocateResources()
        + monitorProgress()
        + communicateWithStakeholders()
        + provideGuidance()
    }
    class TeamMember {
        + accessTasks()
        + collaborate()
        + updateTaskStatus()
        + communicate()
        + participateInMeetings()
        + seekClarification()
    }
    class Administrator {
        + manageUserAccounts()
        + configureSettings()
        + monitorPerformance()
        + provideSupport()
        + implementUpdates()
    }
    User --> ProjectManager : Manages
    User --> TeamMember : Collaborates
    User --> Administrator : Requests support

    ProjectManager --> Administrator : Manages

    TeamMember --> ProjectManager : Reports progress
    TeamMember --> User : Receives tasks

    Administrator --> User : Provides support
    Administrator --> ProjectManager : Supports

Summary

With the assistance of ChatGPT, Mermaid.js, and Draw.io, creating complex diagrams has become remarkably straightforward. Starting from a well-defined use case, we effortlessly generated a detailed diagram, ready for customization and adaptation to specific needs.

This streamlined approach not only saves time but also ensures accuracy and clarity in diagram creation. Whether you’re a seasoned professional or a budding enthusiast, these tools offer a gateway to limitless creativity and effective communication in software design and development. So, armed with ChatGPT, Mermaid.js, and Draw.io, you’re now equipped to tackle any diagrammatic challenge with confidence and precision. Happy diagramming!

About Author

Vaishakhi Panchmatia

As Tech Co-Founder at Yugensys, I’m passionate about fostering innovation and propelling technological progress. By harnessing the power of cutting-edge solutions, I lead our team in delivering transformative IT services and Outsourced Product Development. My expertise lies in leveraging technology to empower businesses and ensure their success within the dynamic digital landscape.

Looking to augment your software engineering team with a team dedicated to impactful solutions and continuous advancement, feel free to connect with me. Yugensys can be your trusted partner in navigating the ever-evolving technological landscape.

Subscribe to our newsletter.
Loading

Related Articles