AI-generated diagrams: From simple processes through architecture to interactive BPMN modeling
⛽ The Data Fuel Station: What do I feed the AI with?
Simply throw your raw data into the chat. The AI understands and processes:
📊 Financial Raw Data
Excel spreadsheets (.xlsx), CSV exports from bank accounts, accounting (e.g., DATEV), CRM systems, or ERP software.
📄 Unstructured Documents
PDF files (invoices, contracts, quotes), scanned org charts, or long email threads.
✍️ Descriptive Prose
Simple free text, meeting notes, hastily typed bullet points, or transcribed process flows.
⚙️ Technical Exports
Server log files, JSON outputs from APIs, or network scans from your IT department.
Part 1: Hard Numbers (From CSV & Excel)
1. Bar Chart: Support Ticket Volume
The AI analyzes your CSV export from the ticketing system and builds a bar chart.
xychart-beta
title "Support Tickets Received by Day of Week"
x-axis [Monday, Tuesday, Wednesday, Thursday, Friday]
y-axis "Number of Tickets" 0 --> 120
bar [95, 110, 85, 60, 45]
Here is a CSV export from our support system for last week (days and ticket count). Analyze the data and create a Mermaid xychart-beta bar chart. The X-axis should show the days of the week, the Y-axis the volume.
2. Line Chart & Trend: Revenue Development
Shows trends over time. Perfect for making monthly Excel revenue figures digestible.
xychart-beta
title "Revenue Development Q1-Q2 (in k€)"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Revenue (k€)" 0 --> 250
line [120, 135, 150, 140, 180, 210]
bar [120, 135, 150, 140, 180, 210]
Read this Excel column with our monthly revenue from Jan to Jun. Create a Mermaid xychart-beta. Use a combination of bars (bar) and a trend line (line) on top. Title: "Revenue Development Q1-Q2".
3. Pie Chart: Market Shares / Product Mix
The classic. The AI automatically sums up raw data from a table and calculates the segments.
pie title Revenue by Product Category (Annual)
"Software Licenses" : 45
"Consulting & Service" : 30
"Hardware Sales" : 15
"Maintenance Contracts" : 10
Analyze the following copied text from my accounting. Group the sales into the 4 main categories and calculate the percentages. Create a Mermaid pie chart from it.
Part 2: Processes & Structures
4. Flowchart: E-Commerce Order Processing
From messy free-text meeting notes emerges a logically verifiable process tree.
graph TD
A(["New Order in Shop"]) --> B["Check Payment"]
B --> C{"Payment Confirmed?"}
C -- Yes --> D["Check Inventory"]
C -- No --> E["Start Dunning"]
D --> F{"Items in Stock?"}
F -- Yes --> G["Picking & Shipping"]
F -- No --> H["Reorder from Supplier"]
H --> G
G --> I(["Customer Receives Tracking Code"])
style A fill:#bfdbfe,stroke:#2563eb
style I fill:#bbf7d0,stroke:#16a34a
Translate these meeting notes on order processing into a top-down (TD) Mermaid flowchart. If payment is missing -> dunning. If paid -> check inventory. If not in stock -> reorder, then ship. End is "Tracking Code to Customer".
6. System Architecture (C4 Model): IT Infrastructure
Throw Excel lists of software licenses into the AI to visualize the enterprise architecture.
Create a C4 context diagram of our IT landscape as a clean inline SVG. Layout: 3 rows – persons at the top (dark blue), internal systems in the middle (blue), external systems at the bottom (gray). Employee uses ERP, customer uses webshop. Webshop → ERP (REST API). Webshop → Payment Gateway (Secure API). ERP → Logistics Partner (SOAP). Dashed arrows with label background, legend at the bottom.
7. Interactive Knowledge Graph: Supply Chain
Mermaid is rigid. Vis.js is alive. Load PDFs of supplier contracts into the AI and get a spider web of your dependencies. (Drag the nodes!)
Write JavaScript code for a Vis.js network based on my supplier list. Central company (Blue) is supplied by Supplier A and B (Green). Supplier A depends on Sub-supplier X (critical bottleneck, red dashed line) and Y. Spring-based physics.
Part 3: Interactive Process Modeling
8. BPMN 2.0 Process Model: Full Editor
A standards-compliant BPMN 2.0 editor right in the browser – powered by bpmn.io.
Double-click elements to rename, drag & drop from the palette on the left, context menu by clicking an element.
💡 Tip: Drag elements from the palette on the left onto the canvas
⏳ Loading BPMN Editor …
Create an HTML page with a bpmn-js Modeler (BPMN 2.0 Editor). Example process "Order Processing": Start → Capture Order → Check Credit → Exclusive Gateway (OK?). Yes: Parallel Gateway → Create Invoice ∥ Pick Goods → Parallel Join → Arrange Shipping → End. No: Inform Customer → End (Rejected). Toolbar with Zoom, Undo/Redo, SVG/XML Export.