Este editor de diagramas es una herramienta para crear contenidos con elementos HTML y estilo CSS, usando solamente elementos <div>. Este componente se apoya en el editor de propiedades CSS y el menú contextual, utilidades que publiqué anteriormente. Con CSS3 podemos generar elementos con bordes redondeados y círculos. Con el uso de transformaciones CSS podemos crear rombos. Se trata de rotar -45º un elemento cuadrado por lo que pasará a ser un rombo. Algo de escalado hará que el rombo se ensanche un poco en la dirección horizontal. Por otro lado para crear y manejar rectas oblicuas con terminaciones de flecha, cuadrado o círculo, ahora incorporo el módulo conector.js que también se basa en transformaciones de rotación para crear una recta oblicua en cualquier dirección.

Para crear triángulos y polígonos en general, tanto regulares como irregulares, uso el selector de área y polígonos. La forma poligonal se dibuja en un canvas temporal y se extrae su imagen con canvas.toDataURL("image/png"). Esta imagen se pone de fondo en el elemento en base64. Podemos incorporar también imágenes desde el propio ordenador editando la propiedad background-image, pues usamos HTML5 File API para acceder a ficheros de imagen locales.

Todos los elementos del diagrama son <div> y se posicionan absolutamente para poder moverlos por el contenedor. Se permite aplicarles otros posicionamientos como static o fixed, aunque entonces no podremos posicionarlos con el selector de área. Hay que entender que esta aplicación no es un editor HTML, por lo que no podemos crear elementos en el interior de otros. Todos se crean en el lienzo que es el contenedor exterior. Dentro de los elementos sólo podemos incoporar texto. Podemos crear elementos DIV para rectángulos, círculos, rombos, etc. y, por otro lado, conectores.

Los conectores tienen un extremo inicial que nos permitirá moverlos y uno final con el que cambiaremos su tamaño y dirección. Al pinchar en el centro del conector se muestra una transparencia de color amarillo en señal de que está seleccionado. Los elementos DIV también se seleccionan con transparencia amarilla. Un elemento DIV puede vincularse con un conector. Para ello debe seleccionar primero un DIV y luego el conector. Con el botón derecho del ratón pinchamos en la entrada Conectar del menú contextual. A partir de ese momento al mover el DIV permanecerá en su sitio el extremo del conector que estuviese más cercano al elemento. Posteriomente podemos mover, cambiar el tamaño o la dirección del conector y la conexión sigue estando activa. En cualquier momento puede desconectarlos.

Al pie de la aplicación se acompaña un desplegable con algunos archivos de muestras para incorporar usando AJAX. Con "nuevo.txt" cargamos un lienzo vacío. El resto son muestras de diagramas que se exportaron usando la pestaña HTML del emergente de las propiedades, con el modo I/O quitando los vendor-prefixes. Al obtener el código en texto plano podemos copiarlo y pegarlo en un archivo de texto. Así posteriormente podemos recuperar ese contenido, pegarlo en el área de texto e importarlo con el botón de incorporar. Por otro lado en el modo presentación obtenemos un código preparado para copiarlo y usarlo en cualquier otra página web, pues ya porta todo el estilo en línea. Podemos exportarlo con o sin vendor-prefixes. En el caso de no utilizar los prefijos hemos de asegurarnos que en la página donde vaya a usarse ese código se gestione este tema de los prefijos. Por ejemplo, usando el gestor de Vendor Prefixes vpForCss.

En resumen, una herramienta para crear diagramas sencillos y exportables en HTML-CSS. Pero además también es útil para practicar con las propiedades CSS.