{"id":978,"date":"2022-10-28T00:00:00","date_gmt":"2022-10-27T22:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=978"},"modified":"2022-10-12T09:31:45","modified_gmt":"2022-10-12T07:31:45","slug":"dibujar-diagramas-para-tareas-de-ingenieria-con-mermaid","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=978","title":{"rendered":"Dibujar diagramas para tareas de ingenier\u00eda con Mermaid"},"content":{"rendered":"

A la hora de que una persona ciega pueda integrarse en un equipo t\u00e9cnico uno de los problemas m\u00e1s habituales es poder utilizar un lenguaje com\u00fan entre todos los miembros del equipo. En muchas tareas y etapas de un proyecto t\u00e9cnico un diagrama puede ser indispensable para que todos los miembros del equipo entiendan el contexto y el momento del proyecto.<\/p>\n

El dibujar un diagrama para una persona ciega puede ser una tarea muy compleja pero adem\u00e1s entender el diagrama dibujado puede ser a\u00fan m\u00e1s complicado ya que los sistemas de reconocimiento de imagen a\u00fan no saben interpretar ese tipo de dibujos.<\/p>\n

El software libre nos ofrece una soluci\u00f3n para todo esto con el proyecto Mermaid<\/a>.<\/p>\n

\u00bfQu\u00e9 es Mermaid?<\/h2>\n

Mermaid es un proyecto de c\u00f3digo abierto que utiliza tecnolog\u00eda Javascript para interpretar c\u00f3digo y texto para obtener el dibujo de un diagrama.<\/p>\n

Esta herramienta permite crear diagramas y visualizaciones usando texto y c\u00f3digo.<\/p>\n

Mermaid se inspira en la gram\u00e1tica de Markdown para que la creaci\u00f3n de diagramas sea lo m\u00e1s sencilla posible.<\/p>\n

El prop\u00f3sito inicial de Mermaid es conseguir que la documentaci\u00f3n t\u00e9cnica de un proyecto pueda ser actualizada por completo, incluido sus diagramas, de forma r\u00e1pida y eficiente.<\/p>\n

Mermaid permite dibujar diagramas de estado, diagramas de clase, diagramas de Gantt, diagramas entidad\/relaci\u00f3n, diagramas de secuencia y diagramas de barras. Incluso permite incorporar nuevos tipos de diagramas.<\/p>\n

Ejemplo de diagrama<\/h2>\n

Con Mermaid dibujar por ejemplo un diagrama de los estados vitales es tan sencillo como escribir un texto como el siguiente:<\/p>\n

stateDiagram-v2
accDescr: Diagrama de estados vitales
[*] --> Nacer
Nacer --> Crecer
Crecer --> Reproducirse
Reproducirse --> Envejecer
Envejecer --> Morir
Morir --> [*]<\/pre>\n
El diagrama obtenido es el siguiente:<\/p>\n
\"Diagrama<\/p>\n
Con muy pocas l\u00edneas de texto bastante comprensible una persona ciega y otra persona que interprete mejor la informaci\u00f3n en diagramas pueden comunicarse y trabajar juntas.<\/p>\n","protected":false},"excerpt":{"rendered":"
A la hora de que una persona ciega pueda integrarse en un equipo t\u00e9cnico uno de los problemas m\u00e1s habituales es poder utilizar un lenguaje com\u00fan entre todos los miembros del equipo. En muchas tareas y etapas de un proyecto t\u00e9cnico un diagrama puede ser indispensable para que todos los miembros del equipo entiendan el … <\/p>\n
Continuar leyendo \u00abDibujar diagramas para tareas de ingenier\u00eda con Mermaid\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,5,7,334],"tags":[419,418,417,394],"class_list":["post-978","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-desarrollo","category-diseno","category-herramientas-de-asistencia","category-javascript","tag-diagramas","tag-dibujos","tag-mermaid","tag-trabajo"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/978","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=978"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/978\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=978"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=978"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=978"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}