La API de Renderizado de Diagramas convierte la notación de diagramas basada en texto en imágenes visuales
Perfecto para sistemas de documentación, plataformas wiki, aplicaciones de chat y cualquier herramienta que necesite visualizar diagramas a partir de texto
Genera un diagrama de Mermaid, PlantUML o notación DOT y devuelve una imagen
Diagrama de renderizado - Características del Endpoint
| Objeto | Descripción |
|---|---|
Cuerpo de la Solicitud |
[Requerido] 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"}'
| Encabezado | Descripción |
|---|---|
Autorización
|
[Requerido] Debería ser Bearer access_key. Consulta "Tu Clave de Acceso a la API" arriba cuando estés suscrito. |
Sin compromiso a largo plazo. Mejora, reduce o cancela en cualquier momento. La Prueba Gratuita incluye hasta 50 solicitudes.
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.
El extremo Render Diagram devuelve una representación visual del diagrama solicitado en formato PNG o SVG La respuesta incluye los datos de la imagen que se pueden utilizar directamente en aplicaciones o documentación
Los campos clave en los datos de respuesta generalmente incluyen el formato de imagen (PNG o SVG) la URL de la imagen o datos binarios y cualquier mensaje de error si la representación falla Esto permite a los usuarios acceder y mostrar fácilmente el diagrama generado
Los usuarios pueden personalizar sus solicitudes especificando parámetros como la notación del diagrama (Mermaid, PlantUML o DOT), el formato de salida deseado (PNG o SVG) y parámetros de estilo opcionales para temas y colores
Los datos de respuesta están estructurados en un formato JSON que contiene campos para los datos de la imagen, el tipo de formato y cualquier metadato relevante Esta organización permite un análisis e integración sencillos en aplicaciones
El endpoint del diagrama de renderizado proporciona información relacionada con el diagrama generado, incluida su representación visual, formato y cualquier error encontrado durante el renderizado. Esto ayuda a los usuarios a entender la salida y solucionar problemas
Los usuarios pueden incrustar directamente la imagen devuelta en páginas web o aplicaciones utilizando la URL de la imagen o los datos binarios Esto permite una integración fluida de diagramas en la documentación mejorando la comunicación visual
Los casos de uso típicos incluyen generar diagramas de flujo para la documentación de procesos crear diagramas de secuencia para el diseño de software y visualizar líneas de tiempo de proyectos con diagramas de Gantt Esta versatilidad apoya diversas necesidades de documentación y visualización
La precisión de los datos se mantiene a través de un riguroso análisis de la notación de entrada y la validación contra la sintaxis soportada para Mermaid, PlantUML y DOT Esto asegura que solo se rendericen diagramas correctamente formateados minimizando errores
Zyla API Hub es como una gran tienda de APIs, donde puedes encontrar miles de ellas en un solo lugar. También ofrecemos soporte dedicado y monitoreo en tiempo real de todas las APIs. Una vez que te registres, puedes elegir qué APIs quieres usar. Solo recuerda que cada API necesita su propia suscripción. Pero si te suscribes a varias, usarás la misma clave para todas, lo que hace todo más fácil para ti.
Los precios se muestran en USD (dólar estadounidense), EUR (euro), CAD (dólar canadiense), AUD (dólar australiano) y GBP (libra esterlina). Aceptamos todas las principales tarjetas de débito y crédito. Nuestro sistema de pago utiliza la última tecnología de seguridad y está respaldado por Stripe, una de las compañías de pago más confiables del mundo. Si tienes algún problema para pagar con tarjeta, contáctanos en [email protected]
Además, si ya tienes una suscripción activa en cualquiera de estas monedas (USD, EUR, CAD, AUD, GBP), esa moneda se mantendrá para suscripciones posteriores. Puedes cambiar la moneda en cualquier momento siempre que no tengas suscripciones activas.
La moneda local que aparece en la página de precios se basa en el país de tu dirección IP y se proporciona solo como referencia. Los precios reales están en USD (dólar estadounidense). Cuando realices un pago, el cargo aparecerá en tu estado de cuenta en USD, incluso si ves el monto equivalente en tu moneda local en nuestro sitio web. Esto significa que no puedes pagar directamente en tu moneda local.
Ocasionalmente, un banco puede rechazar el cargo debido a sus configuraciones de protección contra fraude. Te sugerimos comunicarte con tu banco primero para verificar si están bloqueando nuestros cargos. También puedes acceder al Portal de Facturación y cambiar la tarjeta asociada para realizar el pago. Si esto no funciona y necesitas más ayuda, por favor contacta a nuestro equipo en [email protected]
Los precios se determinan mediante una suscripción recurrente mensual o anual, dependiendo del plan elegido.
Las llamadas a la API se descuentan de tu plan en base a solicitudes exitosas. Cada plan incluye una cantidad específica de llamadas que puedes realizar por mes. Solo las llamadas exitosas, indicadas por una respuesta con estado 200, se contarán en tu total. Esto asegura que las solicitudes fallidas o incompletas no afecten tu cuota mensual.
Zyla API Hub funciona con un sistema de suscripción mensual recurrente. Tu ciclo de facturación comenzará el día en que compres uno de los planes de pago, y se renovará el mismo día del mes siguiente. Así que recuerda cancelar tu suscripción antes si quieres evitar futuros cargos.
Para actualizar tu plan de suscripción actual, simplemente ve a la página de precios de la API y selecciona el plan al que deseas actualizarte. La actualización será instantánea, permitiéndote disfrutar inmediatamente de las funciones del nuevo plan. Ten en cuenta que las llamadas restantes de tu plan anterior no se transferirán al nuevo plan, por lo que debes considerar esto al actualizar. Se te cobrará el monto total del nuevo plan.
Para verificar cuántas llamadas a la API te quedan en el mes actual, revisa el campo 'X-Zyla-API-Calls-Monthly-Remaining' en el encabezado de la respuesta. Por ejemplo, si tu plan permite 1,000 solicitudes por mes y has usado 100, este campo mostrará 900 llamadas restantes.
Para ver el número máximo de solicitudes a la API que permite tu plan, revisa el encabezado de la respuesta 'X-Zyla-RateLimit-Limit'. Por ejemplo, si tu plan incluye 1,000 solicitudes por mes, este encabezado mostrará 1,000.
El encabezado 'X-Zyla-RateLimit-Reset' muestra el número de segundos hasta que tu límite se restablezca. Esto te indica cuándo tu conteo de solicitudes se reiniciará. Por ejemplo, si muestra 3,600, significa que faltan 3,600 segundos para que el límite se restablezca.
Sí, puedes cancelar tu plan en cualquier momento desde tu cuenta, seleccionando la opción de cancelación en la página de Facturación. Ten en cuenta que las actualizaciones, degradaciones y cancelaciones tienen efecto inmediato. Además, al cancelar ya no tendrás acceso al servicio, incluso si te quedaban llamadas en tu cuota.
Puedes contactarnos a través de nuestro canal de chat para recibir asistencia inmediata. Siempre estamos en línea de 8 a. m. a 5 p. m. (EST). Si nos contactas fuera de ese horario, te responderemos lo antes posible. Además, puedes escribirnos por correo electrónico a [email protected]
Para darte la oportunidad de probar nuestras APIs sin compromiso, ofrecemos una prueba gratuita de 7 días que te permite realizar hasta 50 llamadas a la API sin costo. Esta prueba solo se puede usar una vez, por lo que recomendamos aplicarla a la API que más te interese. Aunque la mayoría de nuestras APIs ofrecen prueba gratuita, algunas pueden no hacerlo. La prueba finaliza después de 7 días o cuando realices 50 solicitudes, lo que ocurra primero. Si alcanzas el límite de 50 solicitudes durante la prueba, deberás "Iniciar tu Plan de Pago" para continuar haciendo solicitudes. Puedes encontrar el botón "Iniciar tu Plan de Pago" en tu perfil bajo Suscripción -> Elige la API a la que estás suscrito -> Pestaña de Precios. Alternativamente, si no cancelas tu suscripción antes del día 7, tu prueba gratuita finalizará y tu plan se cobrará automáticamente, otorgándote acceso a todas las llamadas a la API especificadas en tu plan. Ten esto en cuenta para evitar cargos no deseados.
Después de 7 días, se te cobrará el monto total del plan al que estabas suscrito durante la prueba. Por lo tanto, es importante cancelar antes de que finalice el periodo de prueba. No se aceptan solicitudes de reembolso por olvidar cancelar a tiempo.
Cuando te suscribes a una prueba gratuita de una API, puedes realizar hasta 50 llamadas. Si deseas realizar más llamadas después de este límite, la API te pedirá que "Inicies tu Plan de Pago". Puedes encontrar el botón "Iniciar tu Plan de Pago" en tu perfil bajo Suscripción -> Elige la API a la que estás suscrito -> Pestaña de Precios.
Las Órdenes de Pago se procesan entre el día 20 y el 30 de cada mes. Si envías tu solicitud antes del día 20, tu pago será procesado dentro de ese período.
Nivel de Servicio:
100%
Tiempo de Respuesta:
2.039ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
4.251ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
718ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
19.026ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
19.677ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
18.989ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
19.176ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
21ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
13.020ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
718ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
1.293ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
656ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
590ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
718ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
462ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
1.033ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
468ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
718ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
651ms
Nivel de Servicio:
100%
Tiempo de Respuesta:
823ms