Diagramas Con Mermaid
Mermaid es una librería que permite transformar texto en “monos”. Y con “monos” me refiero a diagramas.
Para mi, que soy el rey de los textos “crudos” (mi editor favorito sigue siendo Vim), el poder hacer los monos sin tener que usar un mouse es buenísimo. Además, quedan aptos para un sistema de versionamiento de código
Esta librería soporta varios tipos de diagramas:
- De flujo
- De secuencia
- De clases
- De estados
- Entidad-Relación
- Viaje de Usuario
- Gantt
- De Torta
- Requerimientos
- Git
- C4
- Mindmap
- Timeline
Y lo más bacán es que los diagramas son legibles tanto en formato de texto, pero se “hermosean” al procesarlos mediante Mermaid. Este proceso puede ser un proceso de generación por línea de comando, o “in place” en una página web, simplemente incluyendo un script JS.
De esa forma, podemos transformar esto:
graph TD
A[Pollo] --- B{Cruza la calle}
B -- Si --> C[Llega al otro lado]
B -- No --> D[Juega a la payaya]
en esta belleza:
O este código de clases:
erDiagram
CommercialAgreement ||--o{ CommercialAgreementDetail : contains
CommercialAgreement ||--o{ Invoice : issues
CommercialAgreement ||--|{ Company : services
Service ||--|| CommercialAgreementDetail: provides
Company ||--o{ User : contracts
CommercialAgreementDetail {
float Price
bool Required
}
ServiceType ||--o{ Service : implements
CommercialAgreement ||--o{ InsurancePolicy : backs
InsurancePolicy {
int InsuranceCompany
int ClientCompany
text Details
}
User ||--o{ PersonalAgreement : contracts
PersonalAgreement ||--|| Service : has
PersonalAgreement ||--o{ FamilyMember : has
InsurancePolicy ||--|| Service : has
ServiceProvider }o--|| ServiceAvailability : has
Service ||--o{ ServiceAvailability : has
ServiceAvailability {
int Provider
int Service
date Since
many2many Countries
}
en este diagrama:
Si quiere probar sin compromiso, dama, puede hacerlo en el “playground” online, en el siguiente link:
Happy coding!!