डायग्राम रेंडर एपीआई पाठ-आधारित डायग्राम नोटेशन को दृश्य चित्रों में परिवर्तित करता है
डॉक्यूमेंटेशन सिस्टम, विकी प्लेटफार्म, चैट एप्लिकेशंस और किसी भी उपकरण के लिए बेजोड़ जो पाठ से डायग्राम को दृश्य रूप में प्रदर्शित करने की आवश्यकता है
{"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"}'
| हेडर | विवरण |
|---|---|
Authorization
|
[आवश्यक] होना चाहिए Bearer access_key. जब आप सब्सक्राइब हों तो ऊपर "Your API Access Key" देखें। |
कोई लंबी अवधि की प्रतिबद्धता नहीं। कभी भी अपग्रेड, डाउनग्रेड या कैंसल करें। फ्री ट्रायल में 50 रिक्वेस्ट तक शामिल हैं।
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.
रेंडर डायग्राम एंडपॉइंट अनुरोधित डायग्राम का दृश्य प्रतिनिधित्व पीएनजी या एसवीजी फॉर्मेट में लौटाता है प्रतिक्रिया में इमेज डेटा शामिल होता है जिसका उपयोग सीधे ऐप्लिकेशंस या डॉक्यूमेंटेशन में किया जा सकता है
प्रतिक्रिया डेटा में प्रमुख फ़ील्ड सामान्यतः इमेज फ़ॉर्मेट (PNG या SVG), इमेज URL या बाइनरी डेटा, और यदि रेंडरिंग विफल होती है तो कोई त्रुटि संदेश शामिल होते हैं यह उपयोगकर्ताओं को उत्पन्न किए गए चित्र को आसानी से एक्सेस और प्रदर्शन करने की अनुमति देता है
उपयोगकर्ता अपने अनुरोधों को अनुकूलित कर सकते हैं जैसे कि आरेख नोटेशन (मरमेड, प्लांटयूएमएल, या डॉट), इच्छित आउटपुट प्रारूप (पीएनजी या एसवीजी), और थीम और रंगों के लिए वैकल्पिक स्टाइलिंग पैरामीटर निर्दिष्ट करके
प्रतिकृति डेटा एक JSON प्रारूप में संरचित है जिसमें छवि डेटा फील्ड प्रारूप प्रकार और कोई प्रासंगिक मेटाडेटा शामिल है यह संगठन अनुप्रयोगों में सरल विश्लेषण और एकीकरण की अनुमति देता है
रेंडर डायग्राम अंत बिंदु उत्पन्न किए गए डायग्राम से संबंधित जानकारी प्रदान करता है जिसमें इसके दृश्य प्रतिनिधित्व स्वरूप और रेंडरिंग के दौरान encountered किसी भी त्रुटियों शामिल हैं यह उपयोगकर्ताओं को आउटपुट को समझने और समस्याओं का समाधान करने में मदद करता है
उपयोगकर्ता चित्र यूआरएल या बाइनरी डेटा का उपयोग करके लौटाए गए चित्र को सीधे वेब पृष्ठों या अनुप्रयोगों में एम्बेड कर सकते हैं यह दस्तावेज़ों में चित्रों के सहज एकीकरण को सक्षम बनाता है视觉 संचार को बढ़ाता है
सामान्य उपयोग के मामलों में प्रक्रिया दस्तावेज़ीकरण के लिए फ्लोचार्ट बनाना सॉफ़्टवेयर डिज़ाइन के लिए अनुक्रम आरेख बनाना और गैंट चार्ट के साथ प्रोजेक्ट समयरेखा का दृश्य बनाना शामिल हैं यह बहुआयामीता विभिन्न दस्तावेज़ीकरण और दृश्यता की जरूरतों का समर्थन करती है
डेटा की सटीकता इनपुट नोटेशन के कड़े पार्सिंग और मर्मेड, प्लांटयूएमएल और डॉट के लिए समर्थित वाक्यविन्यास के खिलाफ मान्यता के माध्यम से बनाए रखी जाती है यह सुनिश्चित करता है कि केवल सही ढंग से स्वरूपित आरेख ही प्रस्तुत किए जाएं जिससे त्रुटियों को कम किया जा सके
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
679ms
सर्विस लेवल:
93%
रिस्पॉन्स टाइम:
2,235ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
460ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
4,689ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
585ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
2,287ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
1,704ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
13,507ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
2,355ms
सर्विस लेवल:
100%
रिस्पॉन्स टाइम:
151ms
