Developer's Gospel: Drawing and Converting Diagrams to Code with Excalidraw's AI Feature

Are you often frustrated with drawing diagrams? For example, do you want to draw a flowchart/timing diagram but have no idea where to start? Or maybe you see others quickly drawing beautiful flowcharts while you struggle for a long time and end up being criticized by your superiors. If you have these frustrations, then congratulations, Excalidraw may provide a future answer for us.

1. Introduction to Excalidraw

Excalidraw is an open-source online drawing tool that focuses on simple and collaborative hand-drawn style graphics. It provides an intuitive interface that allows users to easily draw flowcharts, sketches, charts, UI prototypes, and more. The main features of Excalidraw are as follows:

1. Simple and easy to use: Excalidraw has a clean and intuitive interface without complex toolbars and options, making it easy for users to get started and create graphics.

2. Hand-drawn style: Excalidraw's drawing style imitates hand-drawn graphics, making the graphics look more natural, vivid, and readable.

3. Real-time collaboration: Excalidraw supports real-time collaboration, allowing multiple users to edit the same graphic simultaneously and see each other's changes instantly, facilitating teamwork and remote collaboration.

4. Element library and custom elements: Excalidraw provides some common graphic elements such as rectangles, circles, arrows, etc., which users can select from the element library and drag onto the canvas. Users can also customize the appearance and style of elements.

5. Export and sharing: Excalidraw supports exporting drawn graphics to PNG, SVG, and Excalidraw file formats, making it easy to share with others or embed in other documents.

6. Version history and undo/redo: Excalidraw saves the version history of graphics, allowing users to view and restore previous versions at any time. It also provides undo and redo functionality for easy modifications and adjustments.

7. No installation required: Excalidraw is a web-based application that does not require any software installation. Users can directly use it in the browser.

In summary, Excalidraw is a simple, intuitive, and collaboration-friendly online drawing tool suitable for creating various graphics such as flowcharts, sketches, charts, and is well-suited for team and remote collaboration.

2. Use Cases

2.1 Generating Flowcharts with Excalidraw's AI Feature

1. Open Excalidraw website at https://excalidraw.com/.
2. Click the "Text to diagram" button at the top of the page to open the window for generating flowcharts based on prompts.

Excalidraw's AI feature has a usage limit, allowing each user to use it only 100 times per day. If you are using Obsidian, you can use the Excalidraw plugin for Obsidian. After configuring the OpenAI API Key in Obsidian, you can use this feature without limitations.

2.2 Generating Frontend Code from Screenshots

1. Open Excalidraw website at https://excalidraw.com/.
2. Click the "Wireframe to code" button, and the AI will automatically generate HTML code based on the current screenshot.

The generated code is as follows:

        <!-- Main Content -->
        <main class="mt-8">
            <div class="grid grid-cols-3 gap-8">
                <!-- News Section -->
                <div class="col-span-2">
                    <h2 class="text-xl font-semibold mb-4">My Interests</h2>
                    <!-- News Articles -->
                    <div class="space-y-6">
                        <div class="flex space-x-4">
                            <div class="w-32 h-20 bg-gray-300 news-thumbnail"></div>
                            <div>
                                <h3 class="font-semibold">News Title Summary, this is a part of the news title</h3>
                                <p class="text-sm text-gray-500">News Source - 11-30 10:49</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Trending Section -->
                <div>
                    <h2 class="text-xl font-semibold mb-4">Baidu Hot List</h2>
                    <ol class="list-decimal list-inside space-y-2">
                        <li>Hot Topic 1</li>
                        <li>Hot Topic 2</li>
                        <li>Hot Topic 3</li>
                    </ol>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

As we can see, the generated code may not be exactly the same as the original image, but the fidelity is relatively high. With some minor modifications, it can be used effectively. It's truly amazing.

3. Examples of AI Drawings

Here are some examples of AI drawings, so you can see the actual results of using it:

Generating Github OAuth2 Authentication Timing Diagram

HTTPS Certificate Exchange Timing Diagram

Dubbo Invocation Process Flowchart

JVM Memory Model

K8S Module Architecture Diagram

Summary

Overall, Excalidraw's AI functionality is quite powerful, as it can greatly increase our drawing efficiency and frontend development efficiency. However, there are still some shortcomings, such as the drawings not being very aesthetically pleasing, and sometimes misunderstanding the prompts or generating diagrams with syntax errors. Nevertheless, with further iterations and improvements, Excalidraw's AI capabilities are expected to become even more powerful, enabling faster and more accurate understanding of our requirements, making the dream of working only four days a week a reality.