HN público: GUI para editar diagramas de clases de Mermaid

GUI para editar diagramas de clases de Mermaid

• Ventajas de los gráficos de Mermaid: Los gráficos de Mermaid, que permiten representar diagramas complejos rápidamente, se han vuelto aún más intuitivos y fáciles de editar para diagramas de clases gracias a una actualización reciente. La nueva función amplía el editor visual para admitir la interacción directa con diagramas de clases y ofrece varias herramientas para mejorar la experiencia con diagramas.

¿Qué es un diagrama de clases?

• Definición de diagrama de clases: Es un tipo de UML (Lenguaje Unificado de Modelado) que modela la estructura de un sistema para mostrar clases, atributos, métodos y relaciones entre objetos. Es una herramienta esencial en el diseño orientado a objetos y ayuda a visualizar cómo interactúan las distintas partes de un sistema.
• Elementos básicos:
  • Clase: representa un objeto o concepto.
  • Atributo: una característica o propiedad de una clase.
  • Método: una acción u operación que una clase puede realizar.
  • Relación: representa conexiones o interacciones entre clases.

Nuevas herramientas del editor visual

• Introducción de herramientas: La barra de herramientas del editor visual presenta varias herramientas nuevas para diagramas de clases.
  • Cambiar la dirección de renderizado del diagrama: ajusta el diseño del diagrama.
  • Agregar una nueva clase: añade fácilmente una nueva clase al diagrama.
  • Agregar título y notas: añade un título al diagrama o inserta notas que no estén vinculadas a una clase específica.
  • Agregar un espacio de nombres vacío: define un marcador de posición para clases que pertenecen a un espacio de nombres específico.
  • Actualizar la configuración del diagrama: alterna opciones como la visibilidad de las "cajas de miembros vacías" para mantener una apariencia limpia.
  • Cambiar tema y diseño: selecciona distintos temas y ajusta la apariencia del diagrama.

Crear nuevas clases y relaciones

• Cómo crear clases y relaciones:
  • Crear una nueva clase con una relación existente: haz clic en una clase existente del diagrama y arrástrala hacia un espacio vacío para crear una nueva clase y establecer una relación directa con la clase original.
  • Crear relaciones entre clases existentes: arrastra una línea de relación desde una clase hacia otra para establecer rápidamente la relación.

Editar detalles de la clase

• Modificar propiedades de la clase: El editor visual ofrece una potente interfaz interactiva para modificar propiedades de la clase sin usar código. Se puede configurar en detalle cada atributo de una clase.
  • Atributos: definir modificadores de visibilidad, establecer tipos de datos y nombrar atributos.
  • Métodos: configurar la visibilidad del método, definir el tipo de retorno y especificar el nombre del método y sus parámetros.

Consejos adicionales para optimizar diagramas

• Experimenta con distintos diseños: Usa las opciones de diseño y tema para encontrar la apariencia óptima del diagrama.
• Agrega contexto con notas: Usa la función de notas para explicar partes del diagrama y aclarar relaciones complejas.

Primeros pasos

• Aprovecha las herramientas del editor visual de Mermaid: Explora las nuevas funciones para hacer que los diagramas de clases sean más eficientes y accesibles. Ya sea al crear un diagrama nuevo desde cero o al mejorar uno existente, estas actualizaciones ahorran tiempo y esfuerzo y te permiten concentrarte en el diseño y la estructura del sistema.

[GN⁺]

Opiniones en Hacker News

• Normalmente uso Claude como frontend para Mermaid. Cuando tengo que explicar ideas complejas, los diagramas que Claude arma rápido hacen que la explicación sea mucho más fácil.
  También tengo una cuenta de pago de Mermaid, pero como de todos modos uso Claude más que nada, sigue siendo mi primer punto de entrada. Lo que esperaría de una GUI es poder aplicar estilos y colores a esos diagramas rápidos, y mover un poco las cajas para que las flechas queden mejor que con la disposición automática.
  Viendo el blog, parece que quizá no incluyan la posibilidad de cambiar el color y el estilo de cada caja individual; esa es la parte que más tiempo lleva cuando se hace manualmente en código, así que estaría bueno tener herramientas completas para eso.

  • Interesante, pero me pregunto si no hubo puntos problemáticos. La semana pasada le pedí a Claude que hiciera un diagrama sintáctico de una gramática de juguete, y el código fuente de Mermaid terminó con errores de sintaxis por caracteres especiales sin escapar.
    Aunque Claude tiene su propio widget de Mermaid, no logré que corrigiera el error de su propio código.

• Soy Dominic, del equipo de producto de Mermaid. Si tienen problemas actuales con el producto, solicitudes de mejora o algo sobre lo que quieran conversar, escríbanme a [e-mail] o reserven un horario en mi calendario: https://calendly.com/dominic-01w/mermaid-shapers-product-int...

  • Me pregunto cuándo se podrán renderizar los diagramas de Mermaid fuera del navegador web: https://github.com/mermaid-js/mermaid/issues/2485
    Creé un editor de Markdown llamado KeenWrite(https://keenwrite.com/) y permití incrustar diagramas con la sintaxis de triple acento grave. Analiza el prefijo diagram-, pasa palabras como graphviz a Kroki(https://kroki.io/), y Kroki renderiza varios diagramas ASCII, incluido Mermaid.
    En Markdown, los fragmentos de código fuente originalmente se muestran en una fuente monoespaciada agregando un identificador de lenguaje después de los triples acentos graves; es una decisión lamentable que GitHub haya roto esa convención al crear un estándar de facto para diagramas Mermaid.
  • Estoy de acuerdo con la pregunta sobre renderizado sin navegador. Hasta ahora intenté ajustar una configuración de Selenium para builds headless y fallé; el texto también se renderizaba mal.
    Para una herramienta que busca adopción amplia, creo que el renderizado sin navegador debería ser la máxima prioridad como función básica más allá de una PoC.
  • Me gustaría que mejorara el control de layout para evitar que los componentes del diagrama choquen entre sí. Sé que no es una petición fácil, pero me encuentro con componentes mal ubicados con bastante frecuencia, y resolverlo podría convertirse en una gran ventaja de Mermaid.

• Lo probé hace poco y al principio me gustó. ChatGPT también generaba diagramas Mermaid bastante bien, aunque no probé las funciones de IA propias.
  Pero después de crear un diagrama de complejidad media, intenté mejorar manualmente el layout arrastrando elementos con la función Whiteboard y todo se volvió bastante inestable. Era difícil ordenarlo como quería o arrastrar bien, y también costaba resolver los solapamientos. También me pareció una lástima que algunos tipos de diagramas no sean compatibles con Whiteboard.
  También me confunden las diferencias de funciones entre mermaidchart.com y mermaid.live. No sé si son productos competidores o variantes de apps parecidas, y los nombres “Playground” y “Live Editor” también confunden. Aun así, me alegra que exista y espero que siga mejorando.

  • Soy el CEO de Mermaid. Whiteboard todavía está en una etapa temprana, así que va a mejorar bastante en los próximos meses.
    mermaidchart.com y mermaid.live están operados por el mismo equipo. Mermaid.live es el editor original del proyecto open source de 10 años y un editor alojado completamente open source.
    El creador de Mermaid recientemente creó mermaidchart.com junto con el venture studio del CEO de GitLab, y lo estamos escalando para más usuarios y funciones de nivel empresarial. La empresa es de open core y recibió inversión de venture capital, pero el proyecto Mermaid seguirá siendo open source y continuaremos invirtiendo en él.
  • Que Mermaid solo se organice como Mermaid “quiere”, y no como uno quiere, quizá sea un problema fundamental de Mermaid. Desde hace tiempo aparecen espacios vacíos enormes y es difícil lograr el layout deseado.

• Las herramientas de diagramas con algoritmos de distribución automática las uso principalmente solo cuando genero visualizaciones de depuración de forma programática. Para documentación, prefiero dibujarlos a mano con OmniGraffle
  Hacer que un grafo se vea bien con herramientas como graphviz es muy complejo y, al final, uno termina abusando de las funciones de forma rebuscada para conseguir la apariencia deseada
  Creo que lo que realmente hace falta es un algoritmo de distribución de grafos basado en machine learning que pueda tener en cuenta la legibilidad y la estética. Lo que he encontrado hasta ahora está más orientado a mostrar grafos grandes, así que se acerca más a otro campo
  Si Mermaid está recopilando todos los puntos de edición que ocurren en la UI, creo que podría ser un dataset bastante bueno

  • Estamos creando y vendiendo un motor de distribución así, y se puede probar aquí: https://play.d2lang.com/?script=qlDQtVOo5AIEAAD__w%3D%3D&lay...
    Un ejemplo más grande está aquí: https://play.d2lang.com/?script=rJLfavMwDMXv_RR6gYbvo3ce7FWG...
    No me encanta autopromocionarme en un hilo de un competidor, pero como esto no compite con que Mermaid construya su propio motor de distribución, creo que es relevante en este contexto
  • Estos son algunos enlaces interesantes que encontré mientras investigaba este campo. ELK, una biblioteca general para dibujar grafos similar a Graphviz, pero con más opciones y control: https://eclipse.dev/elk/
    Experimentos del equipo de Kiel University que desarrolló ELK: https://github.com/kieler/KLighD
    Wiki del proyecto Kieler: https://rtsys.informatik.uni-kiel.de/confluence/display/KIEL...
    Biblioteca de dibujo de grafos basada en restricciones: https://www.adaptagrams.org/, implementación en JS: https://ialab.it.monash.edu/webcola/
    También vale la pena ver el paper de HOLA https://ialab.it.monash.edu/~dwyer/papers/hola2015.pdf, la demo de Confluent Graphs https://www.aviz.fr/~bbach/confluentgraphs/, el paper sobre distribución ortogonal https://arxiv.org/pdf/1408.4626.pdf y el paper sobre compresión de grafos de potencia https://arxiv.org/pdf/1311.6996v1.pdf
  • Soy Dominic, del equipo de producto de Mermaid. Lanzamos Whiteboard para ayudar a los usuarios a obtener exactamente el layout que quieren, pero todavía está en una etapa temprana y estamos mejorándolo mucho
    Entiendo que los algoritmos de distribución automática son una gran parte del atractivo de Mermaid porque dan velocidad, pero el layout actual a veces puede enredarse de forma bastante compleja
    La idea de un modelo de machine learning me parece interesante, y me da curiosidad cuáles serían los requisitos básicos para un diagrama legible y visualmente agradable. Por ejemplo, podría haber criterios como si los bordes deben ser en ángulo recto o redondeados. Si pueden compartir sus ideas, les pido que me escriban a [e-mail]
  • Estoy construyendo una herramienta que combina una sintaxis para escribir diagramas como código con una sintaxis para definir restricciones de renderizado. Por ejemplo, que esta parte debe estar a la izquierda de aquella, o que esta flecha no debe cruzarse con aquella otra
    Espero que esto facilite mucho tanto el renderizado consistente de diagramas como los ajustes finales a nivel de píxel. Ya está funcionando una versión alfa muy temprana del renderizador que usa Cassowary, y estoy construyendo una buena GUI

• Perdí el interés en cuanto vi “Create your account”. Me gustaría poder probar el editor antes de crear una cuenta y guardar en el almacenamiento local del navegador hasta que me convenza

• Me gusta que Mermaid siga mejorando. Para diagramas de secuencia, creo que https://sequencediagram.org/ es lo mejor. No tengo relación con ellos; solo soy un usuario satisfecho

  • Lo usé antes en una sesión colaborativa de diagramas y me gustó porque era fácil y simple. Dicho eso, lo esencial de Mermaid es la portabilidad. Lo importante es poder incrustarlo en documentos Markdown y verlo en varios editores y plataformas
  • Desde el punto de vista del equipo de producto de Mermaid Chart, creo que la funcionalidad de diagramas de secuencia de Mermaid también destaca bastante. Me da curiosidad qué cosas hace https://sequencediagram.org/ mejor que los diagramas de secuencia de Mermaid
  • Probé otros editores, pero al final siempre vuelvo a sequencediagram.org. Simplemente funciona bien y da menos vueltas
  • Siento que el editor de diagramas de secuencia de MermaidChart es mejor que sequencediagram.org
  • sequencediagram.org probablemente usa PlantUML, así que se puede hacer lo mismo localmente sin el sitio web

• Entiendo que la filosofía es distinta, pero ojalá llegue el día en que se pueda usar Mermaid dentro de LaTeX. Como mínimo, si hubiera una herramienta que convirtiera Mermaid a TikZ de forma confiable, preparar diapositivas sería mucho más fácil
  También se puede exportar a PNG/JPG, pero por lo general se pierde mucha personalización, y lo único que se puede hacer es agrandar o reducir el tamaño para que encaje en la página
  Ayer estaba revisando esto y también vi la nueva GUI presentada en este artículo; al final exporté a PNG y sufrí para ajustarlo al layout de una página de Beamer

• Draw.io permite incrustar diagramas Mermaid, y también hay VSCode y varios plugins para IDE; me pregunto qué tiene de especial esto

  • La integración de Mermaid en Draw.io y los plugins de VSCode/IDE son buenos, pero principalmente permiten la edición programática de los diagramas
    Lo que diferencia a Mermaid Chart es la edición bidireccional. Puedes modificar el código para cambiar el diagrama, y si cambias directamente el diagrama, esos cambios se reflejan automáticamente en el código
    Actualmente esta edición bidireccional está disponible para diagramas de clases y diagramas de flujo, y se planea ampliarla a otros tipos de diagramas populares más adelante
  • La competencia es buena para la innovación y las opciones son buenas para todos. ¿De verdad tiene que ser especial?

• La imagen “Theme Customization in Toolbar” no se renderiza

• El proyecto en sí está genial, pero desde el punto de vista filosófico me deja dudas
  Mermaid busca ser el Markdown de los diagramas, así que lo más importante es que se pueda editar y consumir como texto plano. Si hay que usar un editor visual, no entiendo por qué no usar una herramienta más potente y salir de un formato limitado
  Esto se parece a los editores Markdown WYSIWYG. Claro, tendrá su nicho, pero si es por eso, me pregunto si no bastaría con usar Google Docs o MS Word