Diagram Render API converts text-based diagram notation into visual images.
Perfect for documentation systems, wiki platforms, chat applications, and any tool that needs to visualize diagrams from text.
Renders a diagram from Mermaid, PlantUML, or DOT notation and returns an image.
Render Diagram - Endpoint Features
| Object | Description |
|---|---|
Request Body |
[Required] Json |
{"svg":"<svg id=\"mermaid-1775748725069\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" class=\"flowchart mermaid-svg\" style=\"max-width: 87.5625px;\" viewBox=\"0 0 87.5625 278\" role=\"graphics-document document\" aria-roledescription=\"flowchart-v2\"><style>#mermaid-1775748725069{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-1775748725069 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-1775748725069 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-1775748725069 .error-icon{fill:#552222;}#mermaid-1775748725069 .error-text{fill:#552222;stroke:#552222;}#mermaid-1775748725069 .edge-thickness-normal{stroke-width:1px;}#mermaid-1775748725069 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-1775748725069 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-1775748725069 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-1775748725069 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-1775748725069 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-1775748725069 .marker{fill:#333333;stroke:#333333;}#mermaid-1775748725069 .marker.cross{stroke:#333333;}#mermaid-1775748725069 svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-1775748725069 p{margin:0;}#mermaid-1775748725069 .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-1775748725069 .cluster-label text{fill:#333;}#mermaid-1775748725069 .cluster-label span{color:#333;}#mermaid-1775748725069 .cluster-label span p{background-color:transparent;}#mermaid-1775748725069 .label text,#mermaid-1775748725069 span{fill:#333;color:#333;}#mermaid-1775748725069 .node rect,#mermaid-1775748725069 .node circle,#mermaid-1775748725069 .node ellipse,#mermaid-1775748725069 .node polygon,#mermaid-1775748725069 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-1775748725069 .rough-node .label text,#mermaid-1775748725069 .node .label text,#mermaid-1775748725069 .image-shape .label,#mermaid-1775748725069 .icon-shape .label{text-anchor:middle;}#mermaid-1775748725069 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-1775748725069 .rough-node .label,#mermaid-1775748725069 .node .label,#mermaid-1775748725069 .image-shape .label,#mermaid-1775748725069 .icon-shape .label{text-align:center;}#mermaid-1775748725069 .node.clickable{cursor:pointer;}#mermaid-1775748725069 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-1775748725069 .arrowheadPath{fill:#333333;}#mermaid-1775748725069 .edgePath .path{stroke:#333333;stroke-width:1px;}#mermaid-1775748725069 .flowchart-link{stroke:#333333;fill:none;}#mermaid-1775748725069 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1775748725069 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-1775748725069 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1775748725069 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-1775748725069 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-1775748725069 .cluster text{fill:#333;}#mermaid-1775748725069 .cluster span{color:#333;}#mermaid-1775748725069 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-1775748725069 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-1775748725069 rect.text{fill:none;stroke-width:0;}#mermaid-1775748725069 .icon-shape,#mermaid-1775748725069 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-1775748725069 .icon-shape p,#mermaid-1775748725069 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-1775748725069 .icon-shape .label rect,#mermaid-1775748725069 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-1775748725069 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-1775748725069 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-1775748725069 .node .neo-node{stroke:#9370DB;}#mermaid-1775748725069 [data-look=\"neo\"].node rect,#mermaid-1775748725069 [data-look=\"neo\"].cluster rect,#mermaid-1775748725069 [data-look=\"neo\"].node polygon{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#mermaid-1775748725069 [data-look=\"neo\"].node path{stroke:#9370DB;stroke-width:1px;}#mermaid-1775748725069 [data-look=\"neo\"].node .outer-path{filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#mermaid-1775748725069 [data-look=\"neo\"].node .neo-line path{stroke:#9370DB;filter:none;}#mermaid-1775748725069 [data-look=\"neo\"].node circle{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#mermaid-1775748725069 [data-look=\"neo\"].node circle .state-start{fill:#000000;}#mermaid-1775748725069 [data-look=\"neo\"].icon-shape .icon{fill:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#mermaid-1775748725069 [data-look=\"neo\"].icon-shape .icon-neo path{stroke:#9370DB;filter:drop-shadow(1px 2px 2px rgba(185, 185, 185, 1));}#mermaid-1775748725069 :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;}</style><g><marker id=\"mermaid-1775748725069_flowchart-v2-pointEnd\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"5\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M 0 0 L 10 5 L 0 10 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"mermaid-1775748725069_flowchart-v2-pointStart\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"4.5\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M 0 5 L 10 10 L 10 0 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"mermaid-1775748725069_flowchart-v2-pointEnd-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 11.5 14\" refX=\"11.5\" refY=\"7\" markerUnits=\"userSpaceOnUse\" markerWidth=\"10.5\" markerHeight=\"14\" orient=\"auto\"><path d=\"M 0 0 L 11.5 7 L 0 14 z\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"mermaid-1775748725069_flowchart-v2-pointStart-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 11.5 14\" refX=\"1\" refY=\"7\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11.5\" markerHeight=\"14\" orient=\"auto\"><polygon points=\"0,7 11.5,14 11.5,0\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></polygon></marker><marker id=\"mermaid-1775748725069_flowchart-v2-circleEnd\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"11\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"mermaid-1775748725069_flowchart-v2-circleStart\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"-1\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 1; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"mermaid-1775748725069_flowchart-v2-circleEnd-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refY=\"5\" refX=\"12.25\" markerUnits=\"userSpaceOnUse\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"mermaid-1775748725069_flowchart-v2-circleStart-margin\" class=\"marker flowchart-v2\" viewBox=\"0 0 10 10\" refX=\"-2\" refY=\"5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\"><circle cx=\"5\" cy=\"5\" r=\"5\" class=\"arrowMarkerPath\" style=\"stroke-width: 0; stroke-dasharray: 1, 0;\"></circle></marker><marker id=\"mermaid-1775748725069_flowchart-v2-crossEnd\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 11 11\" refX=\"12\" refY=\"5.2\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><path d=\"M 1,1 l 9,9 M 10,1 l -9,9\" class=\"arrowMarkerPath\" style=\"stroke-width: 2; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"mermaid-1775748725069_flowchart-v2-crossStart\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 11 11\" refX=\"-1\" refY=\"5.2\" markerUnits=\"userSpaceOnUse\" markerWidth=\"11\" markerHeight=\"11\" orient=\"auto\"><path d=\"M 1,1 l 9,9 M 10,1 l -9,9\" class=\"arrowMarkerPath\" style=\"stroke-width: 2; stroke-dasharray: 1, 0;\"></path></marker><marker id=\"mermaid-1775748725069_flowchart-v2-crossEnd-margin\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 15 15\" refX=\"17.7\" refY=\"7.5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"12\" markerHeight=\"12\" orient=\"auto\"><path d=\"M 1,1 L 14,14 M 1,14 L 14,1\" class=\"arrowMarkerPath\" style=\"stroke-width: 2.5;\"></path></marker><marker id=\"mermaid-1775748725069_flowchart-v2-crossStart-margin\" class=\"marker cross flowchart-v2\" viewBox=\"0 0 15 15\" refX=\"-3.5\" refY=\"7.5\" markerUnits=\"userSpaceOnUse\" markerWidth=\"12\" markerHeight=\"12\" orient=\"auto\"><path d=\"M 1,1 L 14,14 M 1,14 L 14,1\" class=\"arrowMarkerPath\" style=\"stroke-width: 2.5; str","_note":"Response truncated for documentation purposes"}
curl --location --request POST 'https://zylalabs.com/api/12326/diagram+render+api/23144/render+diagram' --header 'Authorization: Bearer YOUR_API_KEY'
--data-raw '{"code": "graph TD; A-->B; B-->C;", "type": "mermaid"}'
| Header | Description |
|---|---|
Authorization
|
[Required] Should be Bearer access_key. See "Your API Access Key" above when you are subscribed. |
No long-term commitment. Upgrade, downgrade, or cancel anytime. Free Trial includes up to 50 requests.
The Diagram Render API supports various types of diagrams including flowcharts, sequence diagrams, class diagrams, state diagrams, and Gantt charts using Mermaid.js, as well as diagrams using PlantUML and DOT/Graphviz.
The API can output diagrams in high-quality PNG or SVG formats, allowing for flexibility in usage and integration into different platforms.
The API offers customizable themes and styling options, enabling users to tailor the visual presentation of diagrams to fit their specific needs or branding.
The API is ideal for documentation systems, wiki platforms, chat applications, and any tools that require the visualization of diagrams from text-based notation, enhancing clarity and understanding.
The core value proposition of the Diagram Render API lies in its ability to convert text-based diagram notation into high-quality visual images quickly and efficiently, streamlining the process of creating diagrams and improving productivity.
The Render Diagram endpoint returns a visual representation of the requested diagram in either PNG or SVG format. The response includes the image data, which can be directly used in applications or documentation.
The key fields in the response data typically include the image format (PNG or SVG), the image URL or binary data, and any error messages if the rendering fails. This allows users to easily access and display the generated diagram.
Users can customize their requests by specifying parameters such as the diagram notation (Mermaid, PlantUML, or DOT), the desired output format (PNG or SVG), and optional styling parameters for themes and colors.
The response data is structured in a JSON format, containing fields for the image data, format type, and any relevant metadata. This organization allows for straightforward parsing and integration into applications.
The Render Diagram endpoint provides information related to the generated diagram, including its visual representation, format, and any errors encountered during rendering. This helps users understand the output and troubleshoot issues.
Users can directly embed the returned image in web pages or applications by using the image URL or binary data. This enables seamless integration of diagrams into documentation, enhancing visual communication.
Typical use cases include generating flowcharts for process documentation, creating sequence diagrams for software design, and visualizing project timelines with Gantt charts. This versatility supports various documentation and visualization needs.
Data accuracy is maintained through rigorous parsing of the input notation and validation against supported syntax for Mermaid, PlantUML, and DOT. This ensures that only correctly formatted diagrams are rendered, minimizing errors.
To obtain your API key, you first need to sign in to your account and subscribe to the API you want to use. Once subscribed, go to your Profile, open the Subscription section, and select the specific API. Your API key will be available there and can be used to authenticate your requests.
You can’t switch APIs during the free trial. If you subscribe to a different API, your trial will end and the new subscription will start as a paid plan.
If you don’t cancel before the 7th day, your free trial will end automatically and your subscription will switch to a paid plan under the same plan you originally subscribed to, meaning you will be charged and gain access to the API calls included in that plan.
The free trial ends when you reach 50 API requests or after 7 days, whichever comes first.
No, the free trial is available only once, so we recommend using it on the API that interests you the most. Most of our APIs offer a free trial, but some may not include this option.
Yes, we offer a 7-day free trial that allows you to make up to 50 API calls at no cost, so you can test our APIs without any commitment.
Zyla API Hub is like a big store for APIs, where you can find thousands of them all in one place. We also offer dedicated support and real-time monitoring of all APIs. Once you sign up, you can pick and choose which APIs you want to use. Just remember, each API needs its own subscription. But if you subscribe to multiple ones, you'll use the same key for all of them, making things easier for you.
Please have a look at our Refund Policy: https://zylalabs.com/terms#refund
Service Level:
100%
Response Time:
2,039ms
Service Level:
100%
Response Time:
4,251ms
Service Level:
100%
Response Time:
19ms
Service Level:
100%
Response Time:
8,683ms
Service Level:
100%
Response Time:
2,355ms
Service Level:
100%
Response Time:
19ms
Service Level:
100%
Response Time:
1,895ms
Service Level:
100%
Response Time:
148ms
Service Level:
100%
Response Time:
19ms
Service Level:
100%
Response Time:
139ms
