Forem: Kamal Joshi

Why mermaid diagrams will be the next big thing in creating diagrams?

Kamal Joshi — Sat, 27 Jan 2024 18:28:03 +0000

We've all been there – grappling with traditional diagramming tools like draw.io and Lucidchart, feeling the burden of a steep learning curve and the anxiety of making edits post-export. The struggle is real, and it's a sentiment shared by many in the programming community. However, there's a rising star on the horizon – mermaid diagrams. In this blog post, we'll explore why mermaid diagrams are going to be the next big thing in creating diagrams, addressing the shortcomings of traditional tools and embracing the power of Language Model-based assistance.

The Problems with Traditional Tools:

Divergent Interfaces:

The inherent diversity in the interfaces of tools like draw.io and Lucidchart often results in a high learning curve, making it a daunting task for users to navigate and utilize them effectively.

Non-Incremental Nature:

Traditional tools don't align with the programmer's mindset, lacking the ability to incrementally improve diagrams. The fear of committing to a final version before export can hinder the creative process.

Overwhelming Features:

These tools come loaded with features, many of which are often unnecessary for expressing fundamental concepts in diagrams. From intricate shapes to complex color palettes, the abundance of options adds unnecessary complexity.

Version Control Woes:

The absence of version control mechanisms leaves users scrambling to track changes, making collaboration on diagrams a challenge.

The Mermaid Solution:

Enter mermaid – a game-changer in the world of diagramming. It addresses the pain points of traditional tools by conceptualizing diagrams through text, providing a simple and intuitive solution.

Uniform Syntax:

While learning the syntax for mermaid diagrams is a requirement, it offers a consistent and straightforward approach, reducing the initial learning curve.

Dynamic Evolution:

Mermaid embraces the programmer's desire for incremental development. Editing and refining diagrams become a breeze, aligning perfectly with the iterative nature of coding.

Simplicity in Complexity:

Mermaid strips away unnecessary complexity. It focuses on what's essential, eliminating the need for extensive grouping, ungrouping, and other superfluous features.

Version Control:

Unlike traditional tools, mermaid brings version control to the table, facilitating collaboration and allowing users to track changes seamlessly.

The Challenge of Visualizing:

Creating diagrams using mermaid still requires you to learn the syntax and lookup the examples and sytax when you are creating your diagram.
One other problem with creating diagrams in general is that you have to visualize the whole diagram in your head before you can define it. That part is not easy for a complex document or concept. You know how something works and all the dots are connected in your head but putting it in a neat diagram is still hard.

The Rise of Language Models:

Mermaid was already a breath of fresh air, but the emergence of Large Language Models (LLMs) has taken its capabilities to new heights.

Overcoming Visualization Challenges:

Creating diagrams often requires visualizing the entire structure beforehand, a daunting task for complex concepts. With LLMs like GPT-4, this hurdle becomes surmountable. Dump your knowledge in text format, and let the model generate the diagrams for you. This also makes iterating lot easiler.

This can be done with GPT-4 also but it has few issues

You have to copy paste the generated code into mermaid live editor after every new generation
GPT-4 also makes mistakes sometime like syntax errors, not escaping text correctly so you have to prompt it correctly.

Automation with HueHive:

Addressing challenges head-on, HueHive introduces a diagram generator that seamlessly integrates with mermaid. No more hassles of syntax errors or manual code pasting – just feed it text, and a perfect diagram is at your disposal. You can try it out here

Conclusion:

I am solving these problems by creating diagram generator in HueHive. The detailed explaination of how it works in in this blog but basically in most cases you can just give it text and follow up request to generate a perfact diagram without looking up mermaid syntax even once.

This is the percise reason why I think mermaid diagrams will be the next big thing. It was great before the rise of LLMs but with LLMs help it has become even more easy to create mermaid diagrams and this will continue to improve in future. I will continue to improve the results and experience in future but like any good tool the journey towards simplicity a collective effort!. Please share your throughts, ideas and issues in comments.

HueHive diagram generator -Mermaid diagrams using ChatGPT

Kamal Joshi — Sun, 21 Jan 2024 18:44:40 +0000

With ChatGPT's assistance, we can effortlessly generate and edit diagrams directly within the chat interface. However, visualizing these diagrams requires copying and pasting the code into the Mermaid editor. Introducing the HueHive diagram generator, your solution to seamless diagram creation and visualization in the chat interface.

Creating Diagrams Using ChatGPT

ChatGPT has proven to be more than just a conversational agent. you can now leverage it to generate Mermaid diagrams on the fly. Whether you're sketching out a software architecture, outlining a business process, or visualizing data flow, LLMs can assist you in turning your ideas into clear and concise diagrams. I tried it for multiple usecases and noticed that it works by just explaining the process, architecture to chatGPT.

Visualizing Diagrams in the Chat Screen

One of the problem with ChatGPT is that you can't see the visualization if you are generating diagrams and it becomes hard to iterate without visualization
Second problem is to come up with the prompt to make sure diagram is generated properly. I have seen that without enough context the syntax is incorrect.

One of the unique features of using Huehive for Mermaid diagrams is the ability to instantly visualize the generated diagrams within the chat screen. Gone are the days of switching between tools or platforms—now, you can seamlessly see your ideas come to life as ChatGPT interprets and renders your Mermaid diagrams in real-time, right there in the conversation.

Editing Diagrams

You can edit the diagrams for smaller changes. Once you have the high level diagram with correct syntax, it becomes lot easy to change diagram to your preference. For more complex changes you follow up with Chat Assistant itself.

Opening Diagrams in Mermaid Editor

For users who prefer a more comprehensive editing experience, HueHive facilitates a seamless transition by allowing you to open generated diagrams in the Mermaid editor. This offers a rich editing environment where you can fine-tune every aspect of your diagram with precision, bringing together the best of both AI assistance and traditional diagram editing. You can download also in different formats.

Conclusion

As we explore the capabilities of ChatGPT in diagram creation, visualization, and editing, it becomes evident that the synergy between artificial intelligence and visual representation is opening up new avenues for creativity and efficiency. The power to effortlessly craft Mermaid diagrams within a chat interface not only streamlines the workflow but also encourages a more dynamic and interactive approach to visual thinking. So, dive into the world of AI-assisted diagram creation with ChatGPT and witness your ideas materialize in the form of beautifully crafted Mermaid diagrams.

This is the first version of the Diagram generator, I will continue to enhance and refine the tool. Your feedback and suggestions are invaluable as we strive to create a more seamless and intuitive diagram creation experience with ChatGPT. Please try it out here. Please Share your creations with us and let us know how you use this tool! We welcome all feedback and suggestions.

Croma — My first react native app after 7 years of backend development

Kamal Joshi — Wed, 15 Apr 2020 19:51:27 +0000

Well, I had done some javascript development(node.js) in the past but javascript has changed a lot after ES-6. TIll now my main focus has been backend development in java and ruby(RoR mainly). I am going to share my experience on writing my first react native app.

I decided to learn react native and build something useful as well so decided to rewrite one of the popular app Croma that me and my friend Satyajit Sahoo developed back in 2014. Croma is an app to organize, generate and save color palettes focusing on simple clutter-free design. We could not get time to maintain it and it was written with a web view and native android. Since Satyajit Sahoo suggested to rewrite it in react native so I thought this is a good opportunity to learn react native. Let’s see how I build the initial version

Get your hands dirty

The best way to learn a new framework or a language is to start building something and explore and learn along the way. So I started with a boilerplate react native app using expo as documentation said it’s easier to start with expo.

expo init

I started hello word example app which has some basic functionality already present so this way I can start experimenting right away.
Expo is really easy to start as you can set up a working example app in 5 mins and see the real-time changes in the expo app.

80–20 % rule

I was able to build most of the functionality in few days but completing the whole project became tricky as I got caught up in issues and final styling, making it work with the web turned out to be more difficult than it seemed. I mainly struggled with web.
On mobile browser, the scrollview did not work
Making it look good and understanding styling took some time for me.
Storage, icons etc. also required some debugging
Finishing something 100 % is way harder than it seems and the last 20 % of the work takes 80 % of the time.

Have fun

Learning a new language or framework can be frustrating at the starting so it’s critical to not overthink and have fun while doing it. Don’t worry too much about getting all the details right. I am having fun building Croma and I have made it open source so feel free to jump in a fix some code that I have screwed up. Looking forward to learning from the community

a react native library I build while building croma

The first impression of react native and learnings

With expo it’s very easy to get started
The concept of the component makes sense so easy to write reusable code With ES6 features like async wait and JSX writing javascript has really become more fun
Not everything can be done using react native as I tried to implement a real-time color picker using Camera but the performance turned out to be really a bottleneck. So eventually I will have to move out of expo to implement this feature in the native.
The state of the react-native web is not good and I lot of the things just don’t work on the web. I still managed to fix most of the issues but you have to put extra effort to make things work on the web.
Github actions are awesome to automate the build and release process. I was able to automate web release using Github pages and android release using expo publish. See these workflows if you are also trying to do the same.
I am learning so much about colors and design by building this app that I had very little chance to work on while doing backend development.
You can also implement machine learning algorithms in javascript. I implemented a clustering algorithm to find out top prominent colors from an image and it’s working well. Try it out here.

Looking forward to seeing how people use the app. Please try it out here or download it from the playstore and feel free to send a PR and raise an issue.

Really excited about my react journey and looking forward to learning from the community. Thanks to Satyajit Sahoo and Bhuwan Joshi and for all the help.
Cheers!