{"id":2116,"date":"2026-05-26T08:05:43","date_gmt":"2026-05-26T08:05:43","guid":{"rendered":"https:\/\/www.vpascode.com\/es\/docs\/uncategorized\/mermaid-js-class-diagram-syntax-guide\/"},"modified":"2026-05-26T08:05:43","modified_gmt":"2026-05-26T08:05:43","slug":"mermaid-js-class-diagram-syntax-guide","status":"publish","type":"ld_docs","link":"https:\/\/www.vpascode.com\/es\/docs\/vpascode-docs\/mermaid-js-class-diagram-syntax-guide\/","title":{"rendered":"Gu\u00eda de sintaxis de diagramas de clases de Mermaid.js"},"content":{"rendered":"

\u00bfQu\u00e9 es un diagrama de clases?<\/h2>\n

Un diagrama de clases<\/strong> es un diagrama estructural diagrama UML<\/strong> que visualiza la arquitectura est\u00e1tica de un sistema de software orientado a objetos. Como un tipo de diagrama UML indispensable, tipo de diagrama UML<\/strong> representa las clases individuales, interfaces y modelos de datos dentro de su aplicaci\u00f3n, documentando expl\u00edcitamente sus campos internos (atributos), funciones operativas (m\u00e9todos) y las relaciones estructurales que los unen. Este plano es fundamental para los ingenieros de software que necesitan traducir dise\u00f1os de dominio de alto nivel en estructuras de objetos limpias y mantenibles.<\/p>\n

Con Mermaid.js<\/strong>, puedes bosquejar tus modelos de datos y servicios del sistema utilizando definiciones intuitivas basadas en texto. El motor de dise\u00f1o calcula autom\u00e1ticamente los tama\u00f1os de los cuadros, estructura los compartimentos est\u00e1ndar de datos UML y alinea las flechas relacionales en todo tu lienzo sin ninguna sobrecarga de formato manual.<\/p>\n

Gu\u00eda de sintaxis b\u00e1sica: elementos y construcciones<\/h2>\n

Para dise\u00f1ar un diagrama de clases UML preciso y conforme a las normas en Mermaid, debes dominar las declaraciones de miembros, los modificadores de acceso y las flechas de relaciones estructurales.<\/p>\n

1. Declaraci\u00f3n de clases y compartimentos de clases<\/h3>\n

Puedes definir una clase utilizando dos formatos v\u00e1lidos. Para una clase simple, utiliza la palabra clave class<\/code>seguida del nombre de la clase. Si deseas incluir campos y m\u00e9todos de inmediato, utiliza llaves al final para crear un bloque de cuerpo claro:<\/p>\n

\n
\nMermaid<\/span>
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n
\n
\r\n
\r\n Mermaid<\/span>\r\n \r\n <\/path><\/path><\/svg>\r\n Edit Mermaid in VPasCode<\/span>\r\n <\/a>\r\n <\/div>\r\n
\r\n 
classDiagram\r\n    class UserProfile {\r\n        +String username\r\n        +String email\r\n        +updateEmail(newEmail) void\r\n    }<\/code><\/pre>                <\/div>\r\n                
\r\n                    \r\n                        <\/path><\/path><\/svg>\r\n                        Edit Mermaid in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n
\n
\n<\/path><\/path><\/svg>
\nEditar Mermaid en VPasCode<\/span>
\n<\/a>\n<\/div>\n<\/div>\n
\"\"<\/p>\n
2. Agregar modificadores de visibilidad \/ acceso<\/h3>\n
Para documentar las reglas est\u00e1ndar de encapsulaci\u00f3n UML, coloca un s\u00edmbolo espec\u00edfico directamente antes del nombre de tu atributo o m\u00e9todo para definir su nivel de visibilidad:<\/p>\n