Skip to main content

Añadir diagramas a tu Readme.MD en Github

· One min read
Héctor Mansilla Arias

Cuando tienes un Readme.MD y necesitas tener un diagrama de arquitectura o del proceso que estás trabajándo y no quieres poner una imagen, acá está la solución...

La Sirenita viene al rescate. Y no, no me refiero a la película Disney, me refiero a Mermaid Live un editor de diagramas online y gratuíto que además es compatible con Markdown.

Ok, ok ¿Y cómo funciona?

Simple! Sólo debemos ingresar al Editor de diagramas Online y usar los ejemplos disponibles. Obviamente, los diagramas se crean en base a código que luego pegamos en nuestro Readme.MD y se hace la magia. Por ejemplo acá tenemos un ejemplo de Entidad/Relación:

erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
CUSTOMER ||--o{ ORDER : places
CUSTOMER ||--o{ INVOICE : "liable for"
DELIVERY-ADDRESS ||--o{ ORDER : receives
INVOICE ||--|{ ORDER : covers
ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"

Ahora, sólo falta crear el diagrama según tus necesidades y a dejar 10/10 tus Readme.MD