🚀 Create an AI Diagram Generator with Google Gemini, Mermaid, and Streamlit!

Show the Community!
1

Hey Streamlit Community! :waving_hand:

I’m excited to share a new video tutorial on a fun project I recently built: an AI-Powered Diagram Generator !

This application leverages the power of Streamlit, Google Gemini, and Mermaid to turn simple text prompts into beautiful, structured diagrams. You can simply type a request like “Create an organizational chart for a sales team” or “Timeline of important events in the birth of AI,” and the app will generate the corresponding diagram in real-time.

What you’ll learn from the video:

  • How to integrate Google’s Gemini API into a Streamlit app.

  • How to generate Mermaid diagram code from natural language prompts.

  • How to render and display these diagrams within your Streamlit interface.

  • How to add export options (PDF, PNG, SVG).

:television: Watch the Tutorial on YouTube:

:laptop: Get the Source Code on GitHub:

:globe_showing_europe_africa: A Note on Language Accessibility:
The original video is recorded in Spanish , it has enabled YouTube’s AI-powered English audio track for our global community.

If the video defaults to Spanish for you, you can easily switch to the English dub by navigating to Settings (gear icon) > Audio track > English .

I’d love for you to check it out, experiment with the code, and see what kind of cool diagrams you can create. Any feedback or questions are more than welcome. Let’s learn together!

Happy Streamlit-ing! :balloon:

2 Likes
2

Great job @germancastano! I often get ChatGPT to include Mermaid diagrams in its responses when I’m “vibe” designing something, so this will prove to be useful when I do edits, etc. Also your detailed walkthrough of the code is super helpful.

2 Likes
3

Amazing! Thanks for sharing here @germancastano :star_struck:

1 Like
4

I’m glad you like it @asehmi, I created this first as a chat with a system prompt and Google Gemini and just started asking for diagrams directly and then I used Streamlit to make the tool more complete. The code walkthrough was thanx to YouTube automatic dubbing, I have to describe better in Spanish to get a good translation, nice to hear that the explanation in English is working.

1 Like
5

Thank you for your support @Jessica_Smith, It is great to be able to contribute to the Streamlit community.

1 Like