chatgpt

[alixander]

There are some efforts to integrate D2 with ChatGPT. E.g. https://github.com/bra1nDump/show-me-chatgpt-plugin

I'm not so much a fan of the English description -> diagram DSL use case. It's imprecise, and the cases where it works are contrived. "Show me the civil war as a flowchart" gimmicks, vs utility in business settings.

But one place where I think this could fit really well is to infer icons. (credit to Suren Nihalani for this idea).

icon: guess

Then chatgpt can search the icons on icons.terrastruct.com and pick one based on the ID and label.

You can then instantly put labels on everything with

*: {
  icon: guess
}

[Defozo]

ChatGPT plugin is definitely a must-have for me. Converting already-written code to diagrams, or brainstorming new architecture, all of this is faster with GPT.

[setop]

What is faster than A -> B ? Is it "please dear generative AI, can you draw a diagram with two boxes, one called A, the other called B, and a arrow linking them" ?

BTW, it work 😆 , given this prompt ChatGPT produced :

 Sure! Here is a simple diagram with two boxes labeled A and B, connected by an arrow:
 
 ```
    +-----+       +-----+
    |  A  | ----> |  B  |
    +-----+       +-----+
 ```
 
 In this diagram, box A represents one component or system, and box B represents another component or system. The arrow indicates a connection or interaction between the two.

I'm a bit sarcastic but actually genuinely interested by the king of prompts that could be given.

[alixander]

I thought the same for a long time, until I realized it's second-order prompts. Not "draw A to B then, B to C", but, "draw me a diagram of how the civil war happened". This only works for well-defined things that have been already been broken down into simple cause-effect steps before. It doesn't fit for software architecture diagrams because AI can't answer things like, "what's the lifecycle of a payment request through my system". Which is why this is not a priority for D2.

[Defozo]

@alixander I'd like to respectfully counter that point. AI-integrated tools like cursor.sh are already paving the way for an AI-first development environment. In fact, with platforms like ChatGPT, you can directly input pertinent code segments and it can produce a diagrammatic representation for you. I've been leveraging the "Diagrams: Show me" plugin, which employs the Mermaid language for diagram generation, and it's been quite effective. So, while the technology isn't perfect, we're seeing strides in the right direction for such applications.

[alixander]

Whether it's a priority or not for D2 isn't even relevant anyway. Tools like "Diagrams: Show me" already do have D2 integrated. All we have to do is facilitate training data. GitHub already recognizes D2 as a language, and we're working on a dedicated website for examples.

[wlaan85]

I wrote below instructions in ChatGPT Advanced Data Analysis mode, after it returns "OK" enter the following "Generate a declarative diagram in a code block describing (insert topic here)."

Process the following declarative diagram syntax instructions. Once done, generate "OK" and wait for input.

##Constraints
#Use only defined syntax.
#Strictly adhere to the predefined shape types as listed, rectangle, square, page, parallelogram, document, cylinder, queue, package, step, callout, stored_data, person, diamond, oval, circle, hexagon, cloud without introducing new ones.
#Each term within the same hierarchy level must be unique.
#Use a shape's key, not its label, when declaring relationships.

##Declare shapes.
#Snippet-Start
User: "End User" { shape: person }
Database: "Data Repository" { shape: cylinder }
SystemComponent: "Submodule" { shape: square }
CoreContainer: "Main Module" { shape: rectangle }
UserInput: "Form Entry" { shape: parallelogram }
WebService: "API Endpoint" { shape: cloud }
Decision: "Conditional Branch" { shape: diamond }
StartEnd: "Process Boundary" { shape: oval }
Contract: "Legal Agreement" { shape: document }
Loop: "Iteration Block" { shape: circle }
ArticleSection: "Content Segment" { shape: page }
EventQueue: "Message Queue" { shape: queue }
ComplexTask: "Multifaceted Operation" { shape: hexagon }
Stage: "Workflow Step" { shape: step }
AssetBundle: "Resource Pack" { shape: package }
Annotation: "Note" { shape: callout }
Archive: "Historical Data" { shape: stored_data }
#Snippet-End

##Group shapes.
#Snippet-Start
#The Users shape acts as a container for different types of users.
Users: "User Types" { shape: rectangle }
Users.LowAccess: "Low Access" { shape: rectangle }
Users.LowAccess.Guest: "Guest User" { shape: person }
Users.MediumAccess: "Medium Access" { shape: rectangle }
Users.MediumAccess.Regular: "Regular User" { shape: person }
Users.HighAccess: "High Access" { shape: rectangle }
Users.HighAccess.Admin: "Admin User" { shape: person }

#The System shape is a container for different system components.
System: "System" { shape: rectangle }
System.BackEnd: "Back End" { shape: rectangle }
System.BackEnd.Server: "Web Server" { shape: square }
System.BackEnd.DBServer: "Database Server" { shape: square }
System.App: "Application" { shape: square }
System.App.GuestSection: "Guest Section" { shape: square }
#Snippet-End

##Declare relationships.
#Snippet-Start
#The sensor transmits data to the controller without receiving data back.
Sensor -> Controller: "Data Transmission"

#The library lends books to the student without borrowing any in return.
Library -> Student: "Lends Book"

#The employee submits timesheets to the HR Department without receiving any submissions back.
Employee -> HR Department: "Submits Timesheet"

#The phone and cell tower both exchange voice and data signals.
Phone <-> Cell Tower: "Voice and Data Exchange"

#The user and chatbot send and receive messages, engaging in conversation.
User <-> Chatbot: "Conversation"

#The buyer and seller exchange money for goods.
Buyer <-> Seller: "Trade"
#Snippet-End

##Declare relationships in groups between different levels of hierarchy.
#Snippet-Start
Users.LowAccess.Guest -> System.App.GuestSection: "Limited Access"
Users.MediumAccess.Regular -> System.App: "Regular Access"
Users.MediumAccess.Regular -> System.BackEnd.Server: "Access to Web Server"
Users.HighAccess.Admin -> System: "Root Access"
#Snippet-End

[simkimsia]

what is ChatGPT Advanced Data Analysis mode?

I have chatGPT 4 as paid user.

How do I replicate your efforts here?

[wlaan2020]

It used to be one of the modes you had to select, however they have consolidated them. So just copy paste the script into the prompt, then request a diagram script.