In the fast-paced world of app development, getting your application ready and polished for publication is a journey filled with exciting challenges and creative problem-solving. One such challenge I encountered was the need for a comprehensive architectural diagram for my application, a crucial step to ensure its successful publication on the Zoom marketplace. This diagram wasn't just a formality; it was a blueprint that would guide users and collaborators through the intricate web of services, databases, and interactions that powered the app. And so, my quest began, leading me down the rabbit hole of text-to-diagram tools and eventually to the shores of AI-generated diagrams.
The Quest for the Perfect Tool
As I embarked on this quest, I knew I needed a tool that could translate my application's complexity into a clear, understandable diagram. My research took me through various diagramming languages and tools, each with its unique features and capabilities. From the structured syntax of Graphviz's DOT language to the UML prowess of PlantUML, the journey was both enlightening and a bit overwhelming.
However, amidst the sea of options, one tool caught my eye for its simplicity and effectiveness: Mermaid. Mermaid stood out as a beacon of hope, offering a syntax that felt like the perfect blend of readability and functionality. It promised to turn my architectural dreams into reality with just a few lines of code, and I was eager to dive in. Kudos to the team behind Mermaid for creating such a fantastic application!
The Initial Foray with ChatGPT
With Mermaid chosen as my diagramming language, I turned to an unlikely ally in my quest: ChatGPT. I wondered, could AI help me generate the initial blueprint of my application's architecture? I presented ChatGPT with my docker-compose.yml file, the DNA of my application, and asked for a simple diagram.
The AI, with its vast knowledge and understanding, quickly grasped the essence of my request. It provided me with a Mermaid code snippet that represented the basic structure of my application. This initial diagram was a simple yet effective portrayal of my services and their relationships, a testament to the power of AI in facilitating development tasks.
graph TD
postgres[Postgres:12] -->|depends on| graphql-engine[Hasura GraphQL Engine:v2.35.0]
graphql-engine -->|depends on| hasura[Hasura Custom Build]
graphql-engine -->|depends on| backend[Backend Service]
graphql-engine -->|depends on| frontend[Frontend Service]
graphql-engine -->|depends on| proxy[Proxy Service]
graphql-engine -->|depends on| storage[Storage Service]
backend -->|depends on| transcriber[Transcriber: openai-whisper-asr-webservice]
backend -->|depends on| resource-manager[Resource Manager Service]
backend -->|depends on| gpu-worker[GPU Worker Service]
backend -->|uses| redis[Redis]
classDef default fill:#f9f,stroke:#333,stroke-width:2px;
classDef usedBy fill:#bbf,stroke:#333,stroke-width:2px;
class postgres,graphql-engine,hasura,backend,frontend,proxy,storage,transcriber,resource-manager,gpu-worker,redis default;
Zooming into the Details
Encouraged by the success of the initial diagram, I realized I needed to dive deeper to capture the nuances of how my application interacted with Zoom. The application was designed to seamlessly process Zoom events, store meeting metadata, and handle recordings—a complex dance of services that needed to be accurately depicted.
I provided ChatGPT with detailed descriptions of the interactions, emphasizing the flow of Zoom events through my system. The AI, understanding the intricacies, expanded the diagram. It added components to illustrate the journey of Zoom events through my proxy service to the Hasura GraphQL engine and beyond.
The Final Masterpiece
The final piece of the puzzle was to outline the complete flow of my application, from receiving Zoom events to the transcription and analysis stages. I described this process to ChatGPT, detailing every step and service involved.
ChatGPT responded with a comprehensive Mermaid diagram code that encapsulated the entire process. This final chart was not just a diagram but a story of my application's journey, from Zoom events to actionable insights.
graph TD
Zoom[Zoom Events] -->|Zoom events are sent to| proxy[Proxy Service]
proxy -->|forwards events to| graphql-engine[Hasura GraphQL Engine:v2.35.0]
graphql-engine -->|stores meeting metadata in| postgres[Postgres:12]
graphql-engine -->|triggers processing of recordings| backend[Backend Service]
backend -->|uses| transcriber[Transcriber: openai-whisper-asr-webservice]
transcriber -->|sends transcriptions to| backend
backend -->|stores transcriptions in| postgres
backend -->|analyzes transcriptions using| OpenAI_GPT[OpenAI GPT]
OpenAI_GPT -->|analysis results stored in| postgres
graphql-engine -->|depends on| hasura[Hasura Custom Build]
graphql-engine -->|interacts with| frontend[Frontend Service]
graphql-engine -->|interacts with| storage[Storage Service]
backend -->|interacts with| resource-manager[Resource Manager Service]
backend -->|interacts with| gpu-worker[GPU Worker Service]
backend -->|utilizes| redis[Redis]
classDef services fill:#f9f,stroke:#333,stroke-width:4px;
classDef databases fill:#ff9,stroke:#333,stroke-width:4px;
classDef thirdparty fill:#9f9,stroke:#333,stroke-width:4px;
classDef zoom fill:#f99,stroke:#333,stroke-width:4px;
class Zoom zoom;
class proxy,graphql-engine,backend,transcriber,resource-manager,gpu-worker services;
class postgres databases;
class OpenAI_GPT thirdparty;
A Swift Conclusion
Surprisingly, the whole process of generating this architectural diagram, from conceptualizing the need for it to integrating AI for the creation and refining the final product, took about 15 minutes. This quick turnaround time is a testament to the efficiency of combining AI tools like ChatGPT with powerful diagramming languages such as Mermaid. Writing this article about the journey added another layer of reflection on how AI can significantly streamline and enhance our workflows, making what once seemed daunting tasks, like creating detailed architectural diagrams, both fun and accessible.