Render diagrams from text-based notation including Mermaid, PlantUML, and DOT syntax. Returns high-quality PNG or SVG images of flowcharts, sequence diagrams, class diagrams, and more.
Run in Postman
{"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"}'
After signing up, every developer is assigned a personal API access key, a unique combination of letters and digits provided to access to our API endpoint. To authenticate with the Diagram Render API simply include your bearer token in the Authorization header.
| 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.
(Save 2 months with annual billing 🎉)
Trusted by leading companies
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.
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, first sign in to your account and navigate to the API you want to use. From the API's Pricing section, choose a plan and complete the subscription process. Once subscribed, return to the API page and you will see your API Access Key displayed at the top of the documentation page. You can use this key 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.
The free trial lasts for 7 days and allows you to make up to 50 API requests.
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. If the API offers a free trial, you will see a "Free 7-Day Trial" option in its Pricing section. The trial lasts for 7 days and allows up to 50 API requests, enabling you to evaluate the API before subscribing to a paid plan.
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.
You can monitor your API usage through the response headers included with every request:
x-zyla-api-calls-monthly-used: Shows the total number of API requests you have used during the current billing period.
x-zyla-api-calls-monthly-remaining: Shows the number of API requests you have remaining for the current billing period.
Yes, you can cancel your subscription at any time. Simply go to the Pricing section of the API you're subscribed to and click the "Unsubscribe" button.
Please note that upgrades, downgrades, and cancellations take effect immediately. Once your subscription is canceled, access to the service will end immediately, regardless of any remaining API calls in your quota.
Please have a look at our Refund Policy: https://zylalabs.com/terms#refund
