Nomnoml: diagramas UML dibujados con una gramática de texto

 (nomnoml.com)
2 puntos por GN⁺ 2023-10-03 | 1 comentarios | Compartir por WhatsApp
  • Es una herramienta para escribir diagramas UML como si fueran código; al modificar la gramática de texto de la izquierda, el diagrama renderizado cambia al mismo tiempo
  • Soporta varios elementos de diagrama y notaciones de relaciones, como clases, componentes, flujogramas, casos de uso y bases de datos·tablas
  • El contenido editado se guarda en el localStorage del navegador y puede permanecer para la próxima visita, aunque no se garantiza el guardado
  • El lienzo puede moverse y hacer zoom con arrastre y scroll en el tercio derecho del área, y el editor soporta parte del mapeo de teclas de Sublime Text
  • Con las directivas # y las directivas de estilo . se pueden ajustar fuente, dirección, espaciado, colores, forma de líneas y estilos de clasificadores personalizados

Diagramas construidos con una gramática de texto

  • Nomnoml es una herramienta para escribir y renderizar diagramas con una gramática basada en texto

  • Notación de relaciones

    • Se pueden usar association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden y otros
    • Ejemplo: [Car]->[Engine]
    • Ejemplo: [Car] +-> 0..* [RustPatch]
    • Ejemplo: [Car]o->[Manufacturer]
    • Ejemplo: [Car]<:-[Pickup]

  • Clasificadores soportados

    • En diagramas de clases, además de la clase básica, se soportan abstract, instance, reference, package, frame
    • En diagramas de componentes se pueden usar las notaciones socket y lollipop
    • Como elementos de flujograma están start, end, state, choice, sync, input, sender, receiver, transceiver
    • Los diagramas de casos de uso soportan actor y usecase
    • Como otros elementos se pueden usar note, label, hidden, database, pipe, table
      • Un ejemplo de tabla tiene la forma [<table>Fruits| Apples | 17 || Oranges | 4711]

Edición, directivas y estilos

  • // al inicio de una línea se trata como comentario
    • // en medio de una línea, como en [not //commented], no es un comentario
  • Si se usa el atributo id, dos nodos con el mismo nombre visible pueden convertirse en nodos distintos
    • Ejemplo: [<actor id=a>User], [<actor id=b>User], [a] -- [b]

  • Ajuste de layout y renderizado con directivas #

    • #import: filename
    • #direction: down | right
    • #edges: hard | rounded
    • #background: transparent
    • #font, #fontSize, #spacing, #padding, #stroke, #fill, #zoom
    • #ranker: network-simplex | tight-tree | longest-path

  • Definición de estilos de clasificadores con directivas .

    • Ejemplo: #.box: fill=#8f8 dashed
    • Ejemplo: #.blob: visual=ellipse title=bold
    • Se pueden usar claves/valores como fill, stroke, align, direction, visual
    • Es posible especificar estilos de texto para el título y el cuerpo, como title=left,italic,bold y body=center,italic,bold
    • Los ejemplos de uso incluyen cambio de fuente, layout compacto, creación de tablas, estilos personalizados y división en varios archivos
    • Para dividir en varios archivos se usa una forma como #import: blobby_styles
    • Los cambios en la pantalla de edición se guardan en el localStorage del navegador, y el lienzo puede moverse y hacer zoom con arrastre y scroll en el tercio derecho del área
    • El editor soporta parte del mapeo de teclas de Sublime Text, y Nomnoml está alojado en GitHub

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-10-03
Opiniones en Hacker News

  • Enlace de GitHub: https://github.com/skanaar/nomnoml

  • Al principio me pareció bastante confuso, y recién lo entendí después de encontrar el botón about
    Tal vez he tenido suerte en la vida por no reconocer UML a primera vista. Al principio pensé que estaba explicando algo como una sintaxis falsa de habla pirata

    • Una forma de reconocer UML es que aparecen montones de estilos de flechas que nadie recuerda. Estoy un 90% seguro de que esa es la razón principal por la que UML nunca se volvió ampliamente adoptado
      Me parece mucho mejor un enfoque como este, que de vez en cuando reconoce que nadie memoriza 10 tipos de flechas para leer un diagrama UML: https://buck2.build/docs/concepts/concept_map/
    • Técnicamente, no creo que esto sea UML estándar
      Pero muchas herramientas que usan la palabra “UML” son así, y en la práctica a menudo se necesita algo menos preciso y menos verboso que el UML teórico

  • Antes había un sitio open source que comparaba herramientas para convertir “texto a diagramas”: https://text-to-diagram.com/
    nomnoml no está en la lista

    • Ese sitio lo hicieron los mantenedores de D2, así que puede tener sesgo, pero aun así creo que la sintaxis de D2 es la más amigable de esta familia, incluyendo nomnoml
      [1]: https://d2lang.com/

  • Me gusta Nomnoml. Últimamente lo estoy usando para visualizar una estructura jerárquica de etiquetas en un proyecto de gestión personal del conocimiento (PKM) basado en navegador en el que estoy trabajando
    Suele producir layouts bastante limpios. Ejemplo: https://imgbox.com/9A1mDyNv

  • Parece que la parte móvil necesita ajustes. Lo abrí en el teléfono y el diagrama se dibujaba encima del editor, así que no podía usar el editor

    • Ese es solo el comportamiento del sitio demo de nomnoml. Está configurado para mostrar que, al editar el texto, el diagrama UML renderizado cambia en tiempo real
      La biblioteca JavaScript subyacente puede renderizar directamente en un canvas HTML o como SVG desde un programa Node.js, y también se puede ejecutar desde la línea de comandos si quieres

  • Hace tiempo hice algunas herramientas con nomnoml, incluyendo grafos de flujo de control y grafos de dependencias de código ensamblador de GPU
    Me encantó, pero me dio pena no tener una forma confiable de forzar que ciertos elementos quedaran cerca entre sí. En diagramas muy grandes, a veces toma malas decisiones y se vuelve desordenado
    Aunque la documentación no está completa, el código es bastante fácil de modificar, así que pude hackearlo para mostrar tooltips al pasar el mouse y para que al hacer clic en ciertos cuadros enlazara a otros diagramas. Se agradece que una herramienta tan buena sea open source

  • Obtener un buen layout depende demasiado del orden de definición. En diagramas grandes puede volverse difícil de resolver para el usuario, pero en diagramas pequeños se ve bien
    Por ejemplo, si escribes el mismo ejemplo pirata en otro orden, sigue siendo válido, pero produce un layout feo

    • El problema con estas herramientas es que, aunque de algún modo logres un buen layout en la documentación, en cuanto agregas, eliminas o modificas algo tienes que volver a pelearte con él
      Probé varios de estos productos de diagramas basados en código porque sueño con un mundo donde la documentación técnica, incluidos los diagramas, forme parte del código fuente del proyecto, pero fue difícil obtener layouts aceptables, sobre todo para distribución externa, e incluso para uso interno
      Esa frustración normalmente lleva a dos malos resultados: el diagrama se vuelve ilegible o deja de mantenerse
      Sinceramente, la idea de hacer code review de la documentación al hacer check-in se acerca bastante a un mito. Los diff de este tipo de documentación son muy difíciles de entender, y es casi imposible verificar de forma significativa si el documento está bien sin renderizarlo y ver el resultado
      Es el tipo de problema que realmente quisiera que saliera bien, y tal vez algún día sea un problema resuelto
    • Corrección: pensé que se disponía de arriba hacia abajo, pero no era así; el orden se decide de otra manera
      Si comparas la tabla Pirate original con la tabla Pirate del comentario padre, arriba y abajo quedan invertidos. Aunque definas primero beard y parrot en el orden de visualización deseado, igual salen invertidos
    • Hace falta otra herramienta que optimice la permutación de las sentencias para minimizar los solapamientos en el diagrama resultante
    • Este ejemplo pirata no ayuda mucho a entender. Me pregunto si hay alguna forma de ordenar estas palabras revueltas para que tengan sentido

  • Se ve bien, y parece mucho mejor que los diagramas de clases de PlantUML
    [0]: https://plantuml.com/class-diagram

    • Puede ser. Pero, en vez de crear otro estándar fragmentado, me pregunto si no podríamos mejorar el estilo predeterminado de un estándar que ya cuenta con bastante soporte
    • PlantUML soporta diagramas de secuencia, uno de los tipos de diagramas que uso con más frecuencia. Lamentablemente, nomnoml no los soporta

  • Me recuerda a graphviz