Generating Diagrams via the #create= Hash Property

[alderg]

📝 Generating Diagrams via the #create= Hash Property

The #create= hash property allows you to initialize the draw.io editor with pre-defined data, automatically generating a diagram upon loading. This is achieved by passing a JSON object as the hash value.

---

⚙️ JSON Object Structure for #create=

The #create= property must contain a JSON object with the following key parameters:

Parameter	Required/Optional	Description
data	Required	The raw text or compressed string containing the diagram input (e.g., description, Mermaid code, or CSV data).
type	Required	Specifies the type of input data and the generation engine to use.
compressed	Optional	Must be set to "true" if the data value is compressed.

🔍 Supported type Values

The type parameter determines how the data is processed to create the diagram:

• "generate": Uses the AI backend to generate a diagram based on a natural language description provided in data.
• "mermaid": Generates a diagram from Mermaid.js syntax provided in data.
• "csv": Creates a diagram based on structured CSV data provided in data.

💡 Example: Using Compressed Mermaid Data

If you compress your Mermaid code (e.g., using a library like pako), your JSON object would look like this:

{
  "data": "compressed_mermaid_string_here",
  "type": "mermaid",
  "compressed": "true" 
}

Creating a Preview Link

This feature is commonly used to generate a preview in an iframe or directly launch the diagram editor.

For an example demonstrating how to construct the URL and how to compress the data (e.g., using pako) for use with this property, please refer to the official draw.io tools example:

Draw.io Tools: Generate Diagram Example

Example Link

Draw.io Mermaid Link

#create={"data":"graph TD\n A[Start] --> B[End]","type":"mermaid"}