diagrams
Table of Contents
- 1. Diagrams
- 1.1. Ascii Flow → diagramas en ascii art
- 1.2. Excalidraw · GitHub
- 1.2.1. excalidraw/excalidraw: Virtual whiteboard for sketching hand-drawn like diagrams
- 1.2.2. GitHub - excalidraw/excalidraw-libraries: Collection of publicly available libraries
- 1.2.3. GitHub - excalidraw/excalidraw-store
- 1.2.4. GitHub - excalidraw/svg-to-excalidraw: Convert SVGs into Excalidraw data
- 1.3. tldraw/tldraw: a very good whiteboard
- 1.4. drawio
- 1.5. Diagramas
- 1.6. Ilograph
- 1.7. The C4 Model for Software Architecture
- 1.8. Triángulos ascii
- 1.9. Volcar los campos a csv/texto
- 1.10. Mind Mapping
- 1.10.1. Running PlantUML from Other Tools
- 1.10.2. Modeling for Everyone | Gaphor
- 1.10.3. TikZiT
- 1.10.4. Editores visuales de svg
- 1.10.5. Editores visuales de graphviz
- 1.10.6. Editores visuales de plantuml
- 1.10.7. Servicios online
- 1.10.8. micrology/prsm: PRSM: Participatory System Mapping
- 1.10.9. XMind
- 1.10.10. Freeplane
- 1.10.11. Information architecture, writing and talks by Abby Covert
- 1.10.12. SenseMaking (Data Visualisation) - Computerphile - YouTube
- 1.10.13. http://www.thoughtflow.io/
- 1.11. Structurizr
- 1.12. https://play.d2lang.com
- 1.13. Comparativas
1. Diagrams
1.1. Ascii Flow → diagramas en ascii art
1.2. Excalidraw · GitHub
1.4. drawio
1.5. Diagramas
1.6. Ilograph
Ilograph interactive diagrams are the revolutionary new way to document and explain your systems with amazing clarity and detail.
- Details matter. Show all the relevant details of your systems without the constraints of a traditional diagram.
- Systems are not two-dimensional. Your systems must be viewed from multiple perspectives to be fully understood. Ilograph diagrams make this possible natively.
- Change is inevitable. Ilograph diagrams are defined exclusively using YAML, so they’re easy to create and even easier to maintain.
1.6.1. It’s Time to Drop Drag-and-Drop Architecture Diagramming | Ilograph Blog
There is, however, one glaring and terrifying problem with “easy” you never hear about in marketing materials: it doesn’t scale. Time saved when getting started typically must be paid back later, and with interest.
1.6.1.1. Dark Energy Diagrams idea
Like Dark Energy, add an operation to stretch space in all dimensions to create more room. Solves the packing problem
1.7. The C4 Model for Software Architecture
- https://www.infoq.com/articles/C4-architecture-model//?itm_source=infoq&itm_medium=popular_content_link&itm_campaign=popularContent_articles_clk
- https://www.reddit.com/r/programming/comments/uq69vw/the_c4_model_for_software_architecture/?utm_medium=android_app&utm_source=share
- The C4 model for visualising software architecture
- Level 1: A System Context diagram provides a starting point, showing how the software system in scope fits into the world around it.
- Level 2: A Container diagram zooms into the software system in scope, showing the high-level technical building blocks.
- Level 3: A Component diagram zooms into an individual container, showing the components inside it.
- Level 4: A code (e.g. UML class) diagram can be used to zoom into an individual component, showing how that component is implemented.
- Level 1: A System Context diagram provides a starting point, showing how the software system in scope fits into the world around it.
1.8. Triángulos ascii
height = 15 slope = 1 use_ascii = False if use_ascii: bottom = "_" left = "/" right = '\\' else: bottom = "▁" left = "╱" right = "╲" return "\n".join([slope*(height-i)*" "+left+2*slope*i*(bottom*(i==(height-1))+" "*(i!=(height-1)))+right for i in range(height)])
╱╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱ ╲
╱▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁╲
1.9. Volcar los campos a csv/texto
DrawIO Extras lo tiene text.js? No estoy tan seguro
1.9.1. miro puede volcar los campos a csv
Así puedes plasmar de manera más estructurada lo que haces de manera visual
https://help.miro.com/hc/en-us/articles/360017572754-How-to-export-your-board#h_c0f7083c-5aaa-4b34-9932-f1026c51bf5a
1.10. Mind Mapping
Un buen término de búsqueda para esto es “Mind Mapping Tools”
Se pueden hacer cosas interesantes con PlantUML, pero sólo en modo texto
El siguiente nivel sería editarlo de manera visual, pero manteniendo el texto, que creo que no lo hace ninguna herramienta
Aquí hay herramientas compatibles con PlantUML (se podría exportar a estas y editarlo de manera gráfica en algunas)
Me gusta la combinación de PlantUML open-source y una app gráfica que sea de código cerrado y de pago para que evolucione y mantenga la parte gráfica que falta siempre en código abierto
Recuerdo que dia ya hacía estas cosas (podía exportar a diagramas de latex, pero no sé si los podía importar)
Pictures enable brain parallel processing, text is serial processing Pictures enable brain parallel processing, text is serial processing
1.10.2. Modeling for Everyone | Gaphor
Parece que exporta a XMI
1.10.3. TikZiT
GUI editor for graphs and string diagrams. Its native file format is a subset of PGF/TikZ
1.10.4. Editores visuales de svg
Esto vale para editar cosas que ya están hechas, pero no puedo volver atrás (generar el plantUML o graphviz a partir del svg)
https://boxy-svg.com/
1.10.5. Editores visuales de graphviz
- http://magjac.com/graphviz-visual-editor/ → este es el mejor, click derecho para crear flecha, doble click para soltar la flecha, botón de en medio para crear nodo
- https://edotor.net/ → útil para ver los cambios de los distintos engines de graphviz en tiempo real
1.10.6. Editores visuales de plantuml
1.10.7. Servicios online
- http://gravizo.com/ → servicio online para renderizar graphviz/plantuml
1.10.9. XMind
1.10.10. Freeplane
1.10.11. Information architecture, writing and talks by Abby Covert
1.10.11.1. How to Make Sense of Any Mess book
1.10.11.2. Stuck? Diagrams help. - Abby Covert, Information Architect book
1.11. Structurizr
https://structurizr.com/share/18571/documentation#local-file
docker run -it --rm -p 8080:8080 -v $HOME/.local/share/structurizr2:/usr/local/structurizr structurizr/onpremises # Hay que meterse dentro del contenedor y editar el archivo de config docker exec -it blissful_mcnulty bash
http://localhost:8080/bcrypt/password → hash de la contraseña que pongas por url
Está partido en dsl, que especifica el modelo, y json que especifica el layout
Puedes incluir y excluir partes de un diagrama, está muy bien para combinar generados automáticamente con generados a mano