Generate draw.io Diagrams

[alderg]

Try it

Enter a prompt or MermaidJS syntax and click Preview Diagram to generate a diagram. To make changes to the diagram, click Edit Diagram. If the prompt includes escape sequences or \n, click Unescape. For Gemini and ChatGPT, an API key is required. Use the following resources to obtain one:

• Gemini: https://ai.google.dev/gemini-api/docs/api-key
• ChatGPT: https://platform.openai.com/api-keys

You can include parameters in the URL using a hash tag (#), separated by ampersands (&), with the following options:

• engine: Specify chatgpt, gemini, or mermaidjs
• key: Your API key
• prompt: (Optional) A URL-encoded prompt for processing

Example:

1. generate.html#engine=gemini&key=your-key
2. generate.html#engine=gemini&key=your-key&prompt=sequence%20diagram%20on%20how%20to%20order%20food

Using a hash tag (#) instead of a query parameter (?) ensures the parameters remain in the browser and are not logged by the server delivering the static HTML. This allows you to create bookmarks for specific engines with your private key, which is only sent directly to the engine when generating diagrams.

Models

Currently, the following models are used:

• Gemini: 1.5 Flash
• ChatGPT: 3.5 Turbo