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.
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.
Prices are listed in USD (United States Dollar), EUR (Euro), CAD (Canadian Dollar), AUD (Australian Dollar), and GBP (British Pound). We accept all major debit and credit cards. Our payment system uses the latest security technology and is powered by Stripe, one of the world's most reliable payment companies. If you have any trouble paying by card, just contact us at [email protected]
Additionally, if you already have an active subscription in any of these currencies (USD, EUR, CAD, AUD, GBP), that currency will remain for subsequent subscriptions. You can change the currency at any time as long as you don't have any active subscriptions.
The local currency shown on the pricing page is based on the country of your IP address and is provided for reference only. The actual prices are in USD (United States Dollar). When you make a payment, the charge will appear on your card statement in USD, even if you see the equivalent amount in your local currency on our website. This means you cannot pay directly with your local currency.
Occasionally, a bank may decline the charge due to its fraud protection settings. We suggest reaching out to your bank initially to check if they are blocking our charges. Also, you can access the Billing Portal and change the card associated to make the payment. If these does not work and you need further assistance, please contact our team at [email protected]
Prices are determined by a recurring monthly or yearly subscription, depending on the chosen plan.
API calls are deducted from your plan based on successful requests. Each plan comes with a specific number of calls that you can make per month. Only successful calls, indicated by a Status 200 response, will be counted against your total. This ensures that failed or incomplete requests do not impact your monthly quota.
Zyla API Hub works on a recurring monthly subscription system. Your billing cycle will start the day you purchase one of the paid plans, and it will renew the same day of the next month. So be aware to cancel your subscription beforehand if you want to avoid future charges.
To upgrade your current subscription plan, simply go to the pricing page of the API and select the plan you want to upgrade to. The upgrade will be instant, allowing you to immediately enjoy the features of the new plan. Please note that any remaining calls from your previous plan will not be carried over to the new plan, so be aware of this when upgrading. You will be charged the full amount of the new plan.
To check how many API calls you have left for the current month, refer to the 'X-Zyla-API-Calls-Monthly-Remaining' field in the response header. For example, if your plan allows 1,000 requests per month and you've used 100, this field in the response header will indicate 900 remaining calls.
To see the maximum number of API requests your plan allows, check the 'X-Zyla-RateLimit-Limit' response header. For instance, if your plan includes 1,000 requests per month, this header will display 1,000.
The 'X-Zyla-RateLimit-Reset' header shows the number of seconds until your rate limit resets. This tells you when your request count will start fresh. For example, if it displays 3,600, it means 3,600 seconds are left until the limit resets.
Yes, you can cancel your plan anytime by going to your account and selecting the cancellation option on the Billing page. Please note that upgrades, downgrades, and cancellations take effect immediately. Additionally, upon cancellation, you will no longer have access to the service, even if you have remaining calls left in your quota.
You can contact us through our chat channel to receive immediate assistance. We are always online from 8 am to 5 pm (EST). If you reach us after that time, we will get back to you as soon as possible. Additionally, you can contact us via email at [email protected]
To give you the opportunity to experience our APIs without any commitment, we offer a 7-day free trial that allows you to make up to 50 API calls at no cost. This trial can be used only once, so we recommend applying it to the API that interests you the most. While most of our APIs offer a free trial, some may not. The trial concludes after 7 days or once you've made 50 requests, whichever occurs first. If you reach the 50 request limit during the trial, you will need to "Start Your Paid Plan" to continue making requests. You can find the "Start Your Paid Plan" button in your profile under Subscription -> Choose the API you are subscribed to -> Pricing tab. Alternatively, if you don't cancel your subscription before the 7th day, your free trial will end, and your plan will automatically be billed, granting you access to all the API calls specified in your plan. Please keep this in mind to avoid unwanted charges.
After 7 days, you will be charged the full amount for the plan you were subscribed to during the trial. Therefore, it's important to cancel before the trial period ends. Refund requests for forgetting to cancel on time are not accepted.
When you subscribe to an API free trial, you can make up to 50 API calls. If you wish to make additional API calls beyond this limit, the API will prompt you to perform an "Start Your Paid Plan." You can find the "Start Your Paid Plan" button in your profile under Subscription -> Choose the API you are subscribed to -> Pricing tab.
Payout Orders are processed between the 20th and the 30th of each month. If you submit your request before the 20th, your payment will be processed within this timeframe.
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:
11,424ms
Service Level:
100%
Response Time:
20,003ms
Service Level:
100%
Response Time:
10,945ms
Service Level:
100%
Response Time:
16,911ms
Service Level:
100%
Response Time:
2,355ms
Service Level:
100%
Response Time:
16,173ms
Service Level:
100%
Response Time:
19ms
