Diagrams

LLM Foundry Playground can create diagrams using Mermaid, a text-based diagram language.

For example, the prompt Create a Mermaid diagram showing a simple customer service interaction. using GPT-4o Mini creates this diagram:

A diagram showing a simple customer service interaction

The LLM generates text in this format:

sequenceDiagram
    participant Customer
    participant SupportAgent
    participant System

    Customer->>System: Submit a support ticket
    System-->>Customer: Acknowledge ticket submission
    Customer->>SupportAgent: Request status update
    SupportAgent->>System: Check ticket status
    System-->>SupportAgent: Provide ticket status
    SupportAgent-->>Customer: Respond with ticket status
    Customer->>SupportAgent: Thank you
    SupportAgent-->>Customer: You're welcome!

... which is converted into a diagram using the Mermaid syntax.

There are several types of diagrams. Pick from:

  • Architecture. Draws technical architecture diagrams (e.g., Azure web app architecture).
  • Block diagrams. Visual representations of systems or processes using blocks to denote components and lines to show relationships (e.g., depicting a microservices architecture).
  • C4. Models software architecture at different abstraction levels, focusing on Context, Containers, Components, and Code (e.g., illustrating a web application's system context).
  • Class diagram. Depict the static structure of object-oriented systems, showing classes and their relationships (e.g., modeling the classes in an e-commerce platform).
  • Entity relationship diagram. Illustrate data models by showing entities, their attributes, and relationships (e.g., designing a customer database schema).
  • Flowchart. Visualize processes or workflows, indicating steps and decision points (e.g., outlining an employee onboarding process).
  • Gantt chart. Represent project schedules, displaying tasks along a timeline (e.g., planning a product launch timeline).
  • Git graph. Visualize Git repository histories, showing branches and commits (e.g., demonstrating the branching strategy for a software project).
  • Kanban. Visualize work items in a Kanban board format, aiding in workflow management (e.g., tracking tasks in a software development project).
  • Mind map. Diagram ideas and concepts around a central theme, facilitating brainstorming (e.g., planning features for a new product).
  • Pie chart. Display data proportions in a circular graph (e.g., showing market share distribution among competitors).
  • Quadrant chart. Plot data points across four quadrants to analyze variables (e.g., assessing product features based on impact and feasibility).
  • Requirement diagram. Visualize system requirements and their relationships, aiding in requirement management (e.g., documenting software specifications).
  • Packet. Represent network packet flows and structures (e.g., illustrating data packet transmission in a network).
  • Sequence diagram. Show interactions between entities over time, detailing the sequence of messages (e.g., user authentication process in a web application).
  • Sankey. Depict flows of quantities through a system, with the width of arrows proportional to the flow rate (e.g., energy consumption distribution in a building).
  • State diagram. Model the states of a system or component and transitions between them (e.g., lifecycle of an order in an order management system).
  • Timeline. Chronologically display events or milestones (e.g., project development milestones).
  • User journey. Map the steps a user takes to achieve a goal within a system (e.g., customer purchasing process on an e-commerce site).
  • XY chart. Plot data points on X and Y axes to show relationships between variables (e.g., sales performance over time).
  • ZenUML. A concise way to describe sequence diagrams using a minimalistic syntax (e.g., modeling interactions in a microservice call).

Tips

  • "Create a Mermaid architecture diagram" instructs the model to generate Mermaid output, specifically in the "Architecture" syntax.
  • Mermaid chart types are growing. Models may not know the latest charts. Copy an example to be safe.
  • Not all models generate diagrams well. Try different models.
  • Mermaid.live lets you convert Mermaid text to diagrams. This is useful to explore options and tweak your prompt.