{"id":381,"date":"2022-02-23T09:11:41","date_gmt":"2022-02-23T09:11:41","guid":{"rendered":"https:\/\/ingenieriadesoftware.es\/?p=381"},"modified":"2022-02-25T10:32:33","modified_gmt":"2022-02-25T10:32:33","slug":"10-librerias-javascript-dibujar-diagramas","status":"publish","type":"post","link":"https:\/\/ingenieriadesoftware.es\/10-librerias-javascript-dibujar-diagramas\/","title":{"rendered":"20+ librer\u00edas JavaScript para dibujar todo tipo de diagramas y grafos (edici\u00f3n 2022)"},"content":{"rendered":"<p>Con JavaScript no hay l\u00edmites a lo que puedes llegar a visualizar en tu navegador. Ya hemos visto la gran variedad de <a href=\"https:\/\/ingenieriadesoftware.es\/herramientas-modelar-diagramas-uml-online-navegador\/\" target=\"_blank\" rel=\"noopener noreferrer\">herramientas de modelado UML online<\/a> que existen. Muchas de esas herramientas utilizan JavaScript para renderizar los s\u00edmbolos gr\u00e1ficos y interactuar con ellos. En esta entrada os presentamos 10+ librer\u00edas \/ paquetes JavaScript que pod\u00e9is utilizar para crear vuestra propia herramienta de modelado o, simplemente, para a\u00f1adir alg\u00fan tipo de funcionalidad de dibujo de diagramas a vuestra aplicaci\u00f3n.<\/p>\n<p>Las librer\u00edas se clasifican en dos grupos:<\/p>\n<ol>\n<li>Librer\u00edas con soporte expl\u00edcito para modelos software (ej. librer\u00edas JavaScript con s\u00edmbolos de notaci\u00f3n UML o diagramas de flujo ya predefinidos) y<\/li>\n<li>Librer\u00edas focalizadas en primitivas de dibujo de grafos (y que, por tanto, podr\u00edan adaptarse para cubrir grafos que representen modelos software).<\/li>\n<\/ol>\n<p>Fijaros que nos centramos en librer\u00edas para dibujar diagramas. Si lo \u00fanico que buscas es renderizar un diagrama en modo solo lecutra, puedes \u00e9charle un ojo a esta lista de herramientas para <a href=\"https:\/\/ingenieriadesoftware.es\/la-manera-mas-rapida-de-crear-diagramas-uml-10-herramientas-online-para-el-modelado-textual\/\" target=\"_blank\" rel=\"noopener\">modelar &#8220;programando&#8221;<\/a>.<\/p>\n\n<h2>Librer\u00edas JavaScript para dibujar diagramas UML (o BPMN o ERD &#8230;)<\/h2>\n<h3><strong><a href=\"http:\/\/www.jointjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JointJS<\/a>\u00a0<\/strong><\/h3>\n<p>JointJS puede usarse para dibujar diagramas est\u00e1ticos o para la creaci\u00f3n de una app que ofrezca la posibilidad de dibujar diagramas interactivos. Tiene una versi\u00f3n comercial (Rappid, a continuaci\u00f3n)<\/p>\n<p>Algunas de sus funcionalidades:<\/p>\n<ul>\n<li>Elementos b\u00e1sicos para diagramas (rect\u00e1ngulo, c\u00edrculo, elipse,&#8230;.)<\/li>\n<li>Paleta con soporte para notaci\u00f3n UML, ERC, PN,&#8230; predefinida<\/li>\n<li>Posibilidad de definir tus propias formas con SVG<\/li>\n<li>Elementos i links interactivos para conectarlos<\/li>\n<li>Configuraci\u00f3n de la apariencia visual de los links<\/li>\n<li>diagramas jer\u00e1rquicos<\/li>\n<li>(de)serializaci\u00f3n a JSON<\/li>\n<li>zoom in\/out<\/li>\n<\/ul>\n<p>(ver este <a href=\"https:\/\/modeling-languages.com\/jointjs-javascript-diagramming-toolkit\/\" target=\"_blank\" rel=\"noopener noreferrer\">JointJS post<\/a> para una descripci\u00f3n m\u00e1s detallada de la herramienta)<\/p>\n<p id=\"lNnGvff\"><img decoding=\"async\" class=\" size-full wp-image-4614 aligncenter\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/img_551d334dc6083.png\" alt=\"\" \/><\/p>\n<h3><a href=\"http:\/\/www.jointjs.com\/about-rappid\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Rappid\u00a0<\/strong><\/a><\/h3>\n<p>Rappid es la extensi\u00f3n comercial de JointJS. B\u00e1sicamente, es un conjunto de plugins que se a\u00f1aden a JointJS para a\u00f1adirle funcionalidades muy \u00fatiles si tu objetivo es crear una herramienta de dibujo de diagramas online completa. Ejemplos:<\/p>\n<ul>\n<li>Colaboraci\u00f3n en tiempo real<\/li>\n<li>Copy&amp;paste v\u00eda HTML 5 local storage<\/li>\n<li>Manipulaci\u00f3n de conjuntos de elementos al mismo tiempo<\/li>\n<li>Validaci\u00f3n de documentos<\/li>\n<li>Undo y Redo<\/li>\n<li>Formularios de di\u00e1logo modales y no modales<\/li>\n<li>Auto-layout de grafos dirigidos<\/li>\n<li>Exportaci\u00f3n a SVG<\/li>\n<li>Soporte para BPMN<\/li>\n<\/ul>\n<h3><strong><a href=\"https:\/\/www.jgraph.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">MxGraph<\/a>\u00a0<\/strong><\/h3>\n<p><a href=\"https:\/\/github.com\/jgraph\/mxgraph\" target=\"_blank\" rel=\"noopener noreferrer\">MxGraph<\/a> es una librer\u00eda JavaScript interactiva que hace un muy buen uso de HTML5 y SVG para renderizar los modelos. De hecho es la librer\u00eda sobre la que se construye <a href=\"https:\/\/www.draw.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Draw.io<\/a>. La primera versi\u00f3n es de 2005 y sigue en desarrollo activo a d\u00eda de hoy gracias a <a href=\"https:\/\/github.com\/maxGraph\/maxGraph\" target=\"_blank\" rel=\"noopener\">este fork del proyecto original<\/a>. No utiliza software de terceros lo que facilita su integraci\u00f3n en cualquier framework.<\/p>\n<p id=\"tnAXBRC\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4615 size-full\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/img_551d33b69d8db.png\" alt=\"MxGraph drawing library example\" width=\"646\" height=\"485\" \/><\/p>\n<h3><strong><a href=\"http:\/\/gojs.net\/latest\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">GoJS<\/a>\u00a0<\/strong><\/h3>\n<p>GoJS es una librer\u00eda rica en funcionalidades para la implementaci\u00f3n de diagramas interactivos para cualquier navegador moderno. GoJS hace muy f\u00e1cil la creaci\u00f3n de diagramas complejos con multitud de nodos, links y grupos con plantillas configurables, autolayout, drag&amp;drop, gesti\u00f3n del estado del diagrama, gestores de eventos, posibilidad de deshacer cambios.<\/p>\n<p>GoJS viene con <a href=\"http:\/\/gojs.net\/latest\/samples\/index.html\" target=\"_blank\" rel=\"noopener\">150 ejemplos interactivos<\/a>\u00a0que puedes usar como punto de partida para dibujar diagramas tipo BPMN, flowchart, state chart, visual trees, Sankey, flujos de datos&#8230; La API est\u00e1 muy bien documentada para que no pierdas el tiempo descubriendo como funciona. Hablamos de <a href=\"https:\/\/modeling-languages.com\/gojs-javascript-library-build-diagrams\/\" target=\"_blank\" rel=\"noopener noreferrer\">GoJS en este post<\/a>.<\/p>\n<p id=\"wxYLhWp\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4616 size-full\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/img_551d33df0354a.png\" alt=\"GoJS example\" width=\"452\" height=\"372\" \/><\/p>\n<h3><a href=\"http:\/\/www.jrromero.net\/tools\/jsUML2\" target=\"_blank\" rel=\"noopener\"><strong>jsUML2<\/strong><\/a><\/h3>\n<p>JsUML2 es un librer\u00eda HTML5\/javascript espec\u00edfica para el dibujo de diagramas UML2. Su principal objetivo es ayudar a visualizar y editar modelos UML2 en todo tipo de aplicaciones web, sin dependencias externas y completamente ejecutable en el cliente v\u00eda el navegador.<\/p>\n<p>Da soporte a la modelizaci\u00f3n de todos los tipos importantes de diagramas UML:<\/p>\n<ul>\n<li>Casos de uso.<\/li>\n<li>Diagramas de clases<\/li>\n<li>Diagramas de componentes<\/li>\n<li>Diagramas de secuencia<\/li>\n<li>Diagramas de actividad<\/li>\n<li>Diagramas de estado<\/li>\n<\/ul>\n<p>Permite la configuraci\u00f3n del estilo de cada elemento (tama\u00f1o, color, etc.) as\u00ed como la definici\u00f3n de estereotipos y la exportaci\u00f3n del modelo UML a XML y\/o como imagen.<\/p>\n<p>El desarrollo de la herramienta se <a href=\"http:\/\/www.jrromero.net\/tools\/jsUML2\" target=\"_blank\" rel=\"noopener noreferrer\">par\u00f3 en 2017\u00a0<\/a> pero sigue siendo una opci\u00f3n muy v\u00e1lida para todos los que teng\u00e1is que dibujar UML con JavaScript.<\/p>\n<p id=\"fGgTSiX\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6284 size-full\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2018\/04\/img_5ad6159ae55ec.png\" alt=\"JsUML2 online UML editor\" width=\"537\" height=\"295\" \/><\/p>\n<h3><a href=\"https:\/\/github.com\/skanaar\/nomnoml\" target=\"_blank\" rel=\"noopener noreferrer\">Nomnoml<\/a><\/h3>\n<p>Nomnoml es una conocida h<a href=\"https:\/\/ingenieriadesoftware.es\/la-manera-mas-rapida-de-crear-diagramas-uml-10-herramientas-online-para-el-modelado-textual\/\" target=\"_blank\" rel=\"noopener noreferrer\">erramienta para el modelado textual de UML<\/a> pero ofrece tambi\u00e9n una librer\u00eda JavaScript separada que puedes utilizar para renderizar modelos UML en tu propia web con \u00a0<a href=\"http:\/\/lodash.com\/\" rel=\"nofollow noopener\" target=\"_blank\">lodash<\/a>\u00a0y\u00a0<a href=\"https:\/\/github.com\/cpettitt\/dagre\" target=\"_blank\" rel=\"noopener\">dagre<\/a> como \u00fanicas dependencias.<\/p>\n<p><a href=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2014\/09\/nomnoml2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4265 size-full\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2014\/09\/nomnoml2.png\" alt=\"nomnoml UML example\" width=\"265\" height=\"314\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/mindfusion.eu\/javascript-diagram.html\" target=\"_blank\" rel=\"noopener noreferrer\">Mindfusion Diagram Library<\/a><\/h3>\n<p>Se basa en <span class=\"helptopic\"><a title=\"jQuery\" href=\"http:\/\/www.w3schools.com\/html\/html5_canvas.asp\" target=\"_blank\" rel=\"noopener\">HTML5 Canvas<\/a><\/span> para ayudarte a dibujar. Hay versiones que dependen de <span class=\"helptopic\"><a title=\"jQuery\" href=\"https:\/\/jquery.com\/\" target=\"_blank\" rel=\"noopener\">jQuery<\/a><\/span> o\u00a0<span class=\"helptopic\"><a title=\"Microsoft Ajax\" href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/ee341002(v=vs.100).aspx\" target=\"_blank\" rel=\"noopener\">Microsoft Ajax\u00ae<\/a><\/span> en funci\u00f3n del navegador que se use.<\/p>\n<p>Viene con bastantes fromas predefinidas que permiten crean una variedad de diagramas (diagramas de clase, de proceso, \u00e1rboles, &#8230; ver su <a href=\"https:\/\/github.com\/MindFusionComponents\/JavaScript-Diagram-Samples\" target=\"_blank\" rel=\"noopener noreferrer\">colecci\u00f3n de ejemplos<\/a>) y la posibilidad de definir tus propias formas si hiciera flata. Adem\u00e1s viene con algoritmos de layout para ayudarte en la visualizaci\u00f3n de diagramas complejos.<\/p>\n<h3><a href=\"https:\/\/mermaidjs.github.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mermaid.js<\/a><\/h3>\n<p>Parecida a nomnoml, Mermaid tiene como objetivo principal la generaci\u00f3n de diagramas a partir de descripciones de modelos textuales, en este caso a partir de texto en Markdown. Est\u00e1 implementada con la ayuda de <a href=\"https:\/\/d3js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">d3<\/a>\u00a0y <a href=\"https:\/\/github.com\/cpettitt\/dagre-d3\" target=\"_blank\" rel=\"noopener noreferrer\">dagre-d3<\/a>. Ofrece un editor online pero se puede integrar f\u00e1cilmente en tu aplicaci\u00f3n v\u00eda la <a href=\"https:\/\/mermaidjs.github.io\/mermaidAPI.html\" target=\"_blank\" rel=\"noopener noreferrer\">Mermaid API<\/a>.<\/p>\n<p>Cubre principalmente diagramas de secuencia y diagramas de flujo.<\/p>\n<h3><a href=\"https:\/\/github.com\/bpmn-io\/diagram-js\" target=\"_blank\" rel=\"noopener noreferrer\">Diagram.js\u00a0<\/a><\/h3>\n<p>Librer\u00eda que ofrece funcionalidades claves para la creaci\u00f3n y visualizaci\u00f3n de diagramas. Es usada por <a href=\"https:\/\/bpmn.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">BPMN.io<\/a>\u00a0como infraestructura b\u00e1sica en sus otras librer\u00edas para la creaci\u00f3n de diagramas de procesos de negocio y modelos de decisi\u00f3n. Como ejemplo, <a href=\"https:\/\/github.com\/bpmn-io\/bpmn-js\" target=\"_blank\" rel=\"noopener noreferrer\">bpmn-js<\/a> es la extensi\u00f3n de diagram.js para renderizar diagramas que sigan la notaci\u00f3n BPMN 2.0.<\/p>\n<p>Bpmn-js se ha creado con el objetivo de que sea f\u00e1cilmente extensible con lo que puedes utilizarla para, por ejemplo, para crear alg\u00fan tipo de simulador de modelos a partir de ella.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/demo.bpmn.io\/bpmn\/img\/screencast.gif\" alt=\"bpmn-js example\" width=\"480\" height=\"180\" \/><\/p>\n<h3><a href=\"https:\/\/github.com\/steelbreeze\/state\" target=\"_blank\" rel=\"noopener\">State.js<\/a><\/h3>\n<p>Tal y como su nombre indica, state.js se centra en la visualizaci\u00f3n de m\u00e1quinas de estado jer\u00e1rquicas. Su API ofrece:<\/p>\n<ol>\n<li>Clases para representar m\u00e1quinas de estados (State, PseudoState, Transition, etc.)<\/li>\n<li>Interfaz e implementaci\u00f3n de configuraciones de m\u00e1quinas de estado para ejecutar y guardar m\u00faltiples instancias de la misma m\u00e1quina.<\/li>\n<li>Un conjunto de funciones para controlar la ejecuci\u00f3n de las m\u00e1quinas de estados<\/li>\n<\/ol>\n<p>Est\u00e1 desarrollada en TypeScript y <a href=\"https:\/\/ingenieriadesoftware.es\/diferencia-transpilacion-compilacion\/\" target=\"_blank\" rel=\"noopener noreferrer\">transpilada <\/a>a JavaScript; la puedes usar en cualquiera de los dos lenguajes.<\/p>\n<p><a href=\"https:\/\/modeling-languages.com\/wp-content\/uploads\/2022\/02\/statejs.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7993\" src=\"https:\/\/modeling-languages.com\/wp-content\/uploads\/2022\/02\/statejs.png\" alt=\"drawing state machines in js\" width=\"777\" height=\"422\" \/><\/a><\/p>\n<h3>Eclipse Sprotty y Eclipse Graphical Language Server Platform (GLSP)<\/h3>\n<p><a href=\"https:\/\/github.com\/eclipse\/sprotty\" target=\"_blank\" rel=\"noopener\">Eclipse Sprotty<\/a> y\u00a0 <a href=\"https:\/\/www.eclipse.org\/glsp\/\" target=\"_blank\" rel=\"noopener\">Eclipse GLSP<\/a> van un paso m\u00e1s all\u00e1 y permiten crear editores completos para lenguajes visuales, con lo que no est\u00e1s limitado a lenguajes populares sino que eres libre de inventarte el tuyo propio. Hay una parte de backend que se encarga de la gesti\u00f3n sem\u00e1ntica de los modelos (basada en una adaptaci\u00f3n para lenguajes visuales del <a href=\"https:\/\/modeling-languages.com\/towards-a-language-server-protocol-infrastructure-for-graphical-modeling\/\" target=\"_blank\" rel=\"noopener\">Language Server Protocol<\/a>) y un front-end en JS para el editor.<\/p>\n<p><a href=\"https:\/\/modeling-languages.com\/wp-content\/uploads\/2022\/02\/sprotty.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7994\" src=\"https:\/\/modeling-languages.com\/wp-content\/uploads\/2022\/02\/sprotty.png\" alt=\"Sprotty\" width=\"597\" height=\"434\" \/><\/a><\/p>\n<h2>Librer\u00edas JavaScript para dibujar grafos<\/h2>\n<p>Librer\u00edas que ofrecen primitivas para la gesti\u00f3n y dibujo de grafos. Algunas de ellas son parte importante de los paquetes y librer\u00edas de la secci\u00f3n anterior.<\/p>\n<h3><a href=\"http:\/\/d3js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">D3<\/a><\/h3>\n<p>D3.js es seguramente la librer\u00eda JavaScript de visualizaci\u00f3n de datos m\u00e1s popular. D3 te ayuda a dar vida a tus datos usando HTML, SVG, y CSS. El \u00e9nfasis de D3 en los est\u00e1ndares web te da toda la potencia de los navegadores modernos sin tener que ligarte a ning\u00fan framework propietario. D3 combina componentes de visualizaci\u00f3n muy potentes con una aproximaci\u00f3n &#8220;data-driven&#8221; en la manipulaci\u00f3n del DOM. Adem\u00e1s es muy r\u00e1pido, permitiendo el uso de grandes conjuntos de datos y comportamiento din\u00e1mico en las visualizaciones.<\/p>\n<p>Y si hay algo que crees que D3 no puede hacer, prueba a buscar entre el gran n\u00famero de m\u00f3dulos complementarios para D3, tanto\u00a0<a href=\"https:\/\/github.com\/d3\/d3\/blob\/master\/API.md\" target=\"_blank\" rel=\"noopener\">oficiales<\/a>\u00a0como los <a href=\"https:\/\/www.npmjs.com\/browse\/keyword\/d3-module\" target=\"_blank\" rel=\"noopener\">creados por la comunidad<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-6287 size-large\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2018\/04\/img_5ad6241cd4df0-1024x473.png\" alt=\"D3 relationship graphic example\" width=\"1014\" height=\"468\" \/><\/p>\n<h3><a href=\"http:\/\/dmitrybaranovskiy.github.io\/raphael\/\" target=\"_blank\" rel=\"noopener noreferrer\">Raphael<\/a><\/h3>\n<p>Rapha\u00ebl es una peque\u00f1a librer\u00eda para simplificar la manipulaci\u00f3n de gr\u00e1ficos vectoriales. Por ejemplo, con Rapha\u00ebl se pueden crear charts a medida o widgets que recorten o roten im\u00e1genes. Rapha\u00ebl sigue la SVG W3C Recommendation y VML. Esto implica que cada gr\u00e1fico que creas es al mismo tiempo un objeto DOM lo que permite a\u00f1adirle gestores de eventos para su manipulaci\u00f3n v\u00eda JavaScript. Estuvo un tiempo abandonada pero parece que la tenemos de vuelta.<\/p>\n<h3><a href=\"https:\/\/github.com\/freegroup\/draw2d\" target=\"_blank\" rel=\"noopener\">Draw2D<\/a><\/h3>\n<p>Permite la creaci\u00f3n de diagramas tipo Microsoft Visio dibujando directamente en el navegador o su integraci\u00f3n para crear tus propios editores, de una forma a\u00fan m\u00e1s concisa que lo que permite Rapha\u00ebl (<a href=\"http:\/\/www.draw2d.org\/draw2d\/why.html\" target=\"_blank\" rel=\"noopener noreferrer\">seg\u00fan dicen ellos mismos<\/a>). La d\u00e1bamos tambi\u00e9n por muerta pero ha vuelto con fuerza:<a href=\"https:\/\/github.com\/freegroup\/draw2d\" target=\"_blank\" rel=\"noopener noreferrer\">actividad en el desarrollo<\/a> y hasta una web para <a href=\"https:\/\/freegroup.github.io\/draw2d\/index.html\" target=\"_blank\" rel=\"noopener noreferrer\">probarla online<\/a>.<\/p>\n<p id=\"MAZwYFN\"><img decoding=\"async\" class=\" size-full wp-image-4617 aligncenter\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/img_551d342d7ec09.png\" alt=\"\" \/><\/p>\n<h3><a href=\"http:\/\/fabricjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fabric.js<\/a><\/h3>\n<p>Fabric se basa en HTML canvas y proporciona un modelo de objetos por encima de \u00e9l. Puedes crear y a\u00f1adir objetos a un Canvas, ya sea objetos con formas geom\u00e9tricas simples o formas complejas que agrupen otras. Fabric viene con un parser SVG-to-canvas (y canvas-to-SVG).<\/p>\n<p id=\"WSqsZtO\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4618 size-full\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/img_551d3481b0981.png\" alt=\"Fabric.js example\" width=\"369\" height=\"363\" \/><\/p>\n<h3><a href=\"http:\/\/paperjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Paper.js<\/a><\/h3>\n<p>Paper.js es un framework open source para gr\u00e1ficos de vectores que se ejecuta tambi\u00e9n por encima de un HTML5 Canvas. Se basa en (y es bastante compatible con) <a href=\"http:\/\/scriptographer.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Scriptographer<\/a>, un entorno de scripting para Adobe Illustrator.<\/p>\n<p><a href=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/rectangle.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6292\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/rectangle.png\" alt=\"Paper.js example\" width=\"532\" height=\"434\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/github.com\/jsplumb\/jsplumb\" target=\"_blank\" rel=\"noopener noreferrer\"> JsPlumb<\/a><\/h3>\n<p>jsPlumb ayuda a desarrollar r\u00e1pidamente aplicaciones donde la conectividad visual de elementos sea un punto clave. Utiliza SVG. <a href=\"https:\/\/jsplumbtoolkit.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">JsPlumbToolkit es la extensi\u00f3n comercial<\/a>. A\u00f1ade una capa de funcionalidades adicional como layouts, zooms,&#8230;<\/p>\n<p id=\"SQvPJdA\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4619 size-full\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/img_551d34ebec5c3.png\" alt=\"JSPlumb example\" width=\"492\" height=\"328\" \/><\/p>\n<h3>\u00a0<a href=\"http:\/\/p5js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>p5.js<\/strong><\/a><\/h3>\n<p>Librer\u00eda Javascript para el cliente basado en los principios de la iniciativa <a href=\"https:\/\/processing.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Processing<\/a>, que busca hacer el c\u00f3digo accesible a artistas, dise\u00f1adores y educadores. Aparte de dibujar, esta librer\u00eda ofrece funcionalidad de procesamiento de audio, detecci\u00f3n de colisiones e incluso la <a href=\"https:\/\/github.com\/bitcraftlab\/p5.gui\" target=\"_blank\" rel=\"noopener noreferrer\">generaci\u00f3n de interfaces gr\u00e1ficas de usuario a partir de bocetos p5.js<\/a>.<\/p>\n<h3><a href=\"http:\/\/cytoscape.github.io\/cytoscape.js\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cytoscape.js<\/a><\/h3>\n<p>Una librer\u00eda muy optimizada para el tratamiento de grafos. Incluye algoritmos de teor\u00eda de grafos y redes para poder analizar y visualizar grafos complejos. Con exportaci\u00f3n a JSON.<\/p>\n<p><a href=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/cytoscape.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6293\" src=\"http:\/\/modeling-languages.com\/wp-content\/uploads\/2015\/04\/cytoscape.png\" alt=\"cytoscape.js example\" width=\"664\" height=\"479\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/github.com\/almende\/vis\" target=\"_blank\" rel=\"noopener noreferrer\">vis.js<\/a><\/h3>\n<p>Vis.js es librer\u00eda dise\u00f1ada para ser f\u00e1cil de usar al mismo tiempo que permite la visualizaci\u00f3n de grandes conjuntos de datos din\u00e1micos que se pueden manipular de forma interactiva.<\/p>\n<h3>React Diagrams<\/h3>\n<p><a href=\"https:\/\/github.com\/projectstorm\/react-diagrams\" target=\"_blank\" rel=\"noopener noreferrer\">React Diagrams<\/a> es una librer\u00eda para el dibujo de flujos y diagramas orientados a procesos. Escrita completamente en Typescript y React. Extensible y modular para facilitar la adaptaci\u00f3n a las necesidades de tu proyecto.\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/github.com\/projectstorm\/react-diagrams\/raw\/master\/.gitbook\/assets\/example1.jpg\" alt=\"React Diagrams example model\" width=\"968\" height=\"499\" \/><\/p>\n<h3>Tldraw<\/h3>\n<p><a href=\"https:\/\/github.com\/Tldraw\/Tldraw\" target=\"_blank\" rel=\"noopener\">Tldraw<\/a> es la m\u00e1s reciente. Es una peque\u00f1a herramienta (como la define su propio autor) para dibujar diagramas simples pero con un estilo muy claro y que simula los diagramas hechos a mano. Tiene tambi\u00e9n <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=tldraw-org.tldraw-vscode\" target=\"_blank\" rel=\"noopener\">una extensi\u00f3n para VSCode <\/a>\u00a0con lo que puedes dibujar tus diagramas directamente ah\u00ed.<\/p>\n<p><a href=\"https:\/\/modeling-languages.com\/wp-content\/uploads\/2022\/02\/tldraw.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-7995\" src=\"https:\/\/modeling-languages.com\/wp-content\/uploads\/2022\/02\/tldraw-1024x712.png\" alt=\"\" width=\"1024\" height=\"712\" \/><\/a><\/p>\n<p style=\"font-size: 90%;\">Imagen destacada gracias a <a href=\"https:\/\/www.flickr.com\/photos\/uaeincredible\/\" target=\"_blank\" rel=\"noopener noreferrer\">Capture Queen <\/a><\/p>\n<span class=\"et_bloom_bottom_trigger\"><\/span>","protected":false},"excerpt":{"rendered":"<p>Repasamos las mejores librer\u00edas JavaScript para dibujar diagramas UML, BPMN,&#8230; en el navegador. Incluimos tambi\u00e9n librer\u00edas para dibujar otros muchos tipos de grafos. <\/p>\n","protected":false},"author":2,"featured_media":383,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[5,2],"tags":[91,152,23,153,4],"hashtags":[],"_links":{"self":[{"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/posts\/381"}],"collection":[{"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/comments?post=381"}],"version-history":[{"count":0,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/posts\/381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/media\/383"}],"wp:attachment":[{"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/media?parent=381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/categories?post=381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/tags?post=381"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/ingenieriadesoftware.es\/wp-json\/wp\/v2\/hashtags?post=381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}