Flow Chart Generate AI

[ilovetensor]

I had an idea of generating flow charts from openai response in markdown values, and then render them using mermaid js library.

This way a chatbot can be made which generates multiple plots.

[kishor1]

@ilovetensor

I had an idea of generating flow charts from openai response in markdown values, and then render them using mermaid js library.

This way a chatbot can be made which generates multiple plots

yes good idea. Here is my example:

Flow Chart Generator

Flow Chart Generator

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        console.log('DOM fully loaded and parsed');
        
        // Wait for Mermaid to load
        window.addEventListener('load', () => {
            console.log('Window fully loaded');
            try {
                mermaid.initialize({ startOnLoad: false });
                console.log('Mermaid initialized');

                const mermaidSyntax = `
                    graph TD
                    A[Client] --> B[Load Balancer]
                    B --> C[Server01]
                    B --> D[Server02]
                `;

                const element = document.querySelector("#flowchart");
                
                mermaid.render('mermaid-diagram', mermaidSyntax).then(result => {
                    element.innerHTML = result.svg;
                    console.log('Mermaid render completed');
                });
            } catch (error) {
                console.error('Error:', error);
            }
        });
    });
</script>