Getting Started with Diagramming AI

Welcome to Diagramming AI, where you can instantly design and edit UML & Workflows with the power of AI. This guide will help you get started and make the most of the features available.

Now, with the addition of Graphviz support, you can create and manage diagrams in Mermaid, PlantUML, and Graphviz all in one place.

Graphviz is an open-source graph visualization software that uses the DOT language to describe graphs. It is particularly powerful for representing complex relationships and dependencies in a visual format.

Projects

Create a project to manage your diagrams by clicking the "Add new project" button. You can access your projects from the table thereafter.

Diagrams

Harness various features here. Automatically create and update diagrams with instructions to GPT-based AI, find issues, or get suggestions for updates through AI chat.

You can now create diagrams using Mermaid, PlantUML, or Graphviz code, offering you flexibility in your diagramming needs.

AI

New:

Enter instruction text in the AI's text area and submit to generate diagrams. This process allows you to create diagrams based on specific instructions you provide.

The "Format input" button optimizes the instruction text for AI. Use this feature to ensure your diagram generation aligns more closely with your intentions, especially if the initial output isn't quite right.

By selecting "Select templates", you can choose from various templates. The AI recognizes these templates and generates diagrams accordingly, helping to tailor the output to your needs.

The "Output Quantity" feature allows you to adjust the volume of diagrams. You can select from Low, Medium, or High to control the amount of generated content based on your preference.

The "URL" tab, available in higher plans, lets you generate diagrams by analyzing website structures. Simply enter a URL, and the AI will produce a summary diagram of the site's structure.

Use the "Undo" button to revert any changes if the AI's output isn't what you expected. There's also a "Redo" button, allowing you to step forward if you change your mind.

Turning on the "explanation:" toggle generates descriptions alongside diagrams, offering a textual explanation of the visual content for better understanding and clarity.

Code

AI-generated Mermaid, PlantUML, or Graphviz codes are outputted here. You can edit and update the code yourself.

Graphviz Code: When working with Graphviz, the code is written in the DOT language. This language allows you to define the nodes, edges, and their attributes in a straightforward text format.

Note: Sometimes errors may occur with AI-generated code. In such cases, read the error message, make corrections, or have AI regenerate the diagram. We are continuously working on improvements.

Config

Edit content using the "Quick Edit" feature, which reflects changes in Config. Diagram codes are saved during the save process.

Note

Notes are accessible at any time, providing a space to record essential information necessary for creating diagrams, documenting AI outputs, and managing other relevant data. They are saved automatically when you save your diagrams. Using notes can be particularly beneficial for efficiently managing complex project information.

Save and Export

Download diagrams in SVG, PNG, or generate a URL for sharing with Kroki. Specify dimensions for PNG downloads. The "Save as New" and "Update Existing Diagram" options facilitate diagram management. Switch between Mermaid, PlantUML, and Graphviz with the dedicated buttons.

Saved Diagrams

Restore saved diagrams using the "Restore" button. The number of diagrams you can save is limited by your plan. Titles are always editable.

Models (LLM)

Our platform provides access to advanced models for different user plans. All users can use GPT-4o-mini, Gemini-1.5-Flash, and Claude-3.5-Haiku. For users with higher plans like Starter or Pro, additional models such as GPT-4o, Gemini-1.5-Pro, and Claude-3.5-Sonnet are also available. These models are always updated to the latest version to ensure the best performance. You can also enhance your diagrams with customizable color themes, compatible with Mermaid, PlantUML, and Graphviz.

Changing Diagram Language

You can switch between Mermaid, PlantUML, and Graphviz languages for your diagrams by clicking the corresponding button located at the bottom left of the diagram display area. When generating or saving diagrams with AI in this state, the selected language format will be used.

Tip: When you select Graphviz, you will be working with the DOT language syntax. This allows you to define complex graphs with nodes and edges in a text-based format.

Errors

After diagrams are generated by AI, they are rendered. Occasionally, there may be syntax errors that require correction in the Code section.

Errors will be displayed on the screen for reference and should be corrected accordingly. Additionally, the Update feature may automatically correct errors when informed of the issue.

Conclusion

Utilize Diagramming AI for creating, chatting about, updating, saving, and retrieving diagrams to enhance productivity across your projects. New templates and features are continuously added. Your feedback on our product and features is highly appreciated.

Appendix: Diagram Types

Mermaid.js, PlantUML, and Graphviz support an extensive array of diagram types, catering to a variety of needs in software development, system design, and business process visualization. Here is a comprehensive list of the diagram types you can generate with these tools:

Mermaid.js Diagrams: Flowchart, Sequence Diagram, Gantt Chart, Class Diagram, State Diagram, Entity Relationship Diagram, Use Case Diagram, XY chart, Pie Chart.

PlantUML Diagrams: Use Case Diagram, Class Diagram, Sequence Diagram, Activity Diagram, Component Diagram, State Diagram, Object Diagram, Deployment Diagram, Timing Diagram, Composite Structure Diagram, Package Diagram, Entity Relationship Diagram, Wireframe, Architecture Diagram, Archimate Diagram, MindMap, Work Breakdown Structure, Value Stream Mapping, WBS (Work Breakdown Structure) diagram, Organization diagram.

Graphviz Diagrams: Directed Graphs, Undirected Graphs, Subgraphs, Clusters, and various other graph structures. Graphviz uses the DOT language, which allows you to define nodes, edges, and their attributes in a simple text format. This makes it particularly powerful for representing complex relationships and dependencies visually.

These tools offer remarkable versatility, enabling the creation of detailed diagrams for software architecture, database design, project management, and business process flows, including Value Stream Mapping (VSM), among others.