¿Qué es el Diseñador de clases?
Con la herramienta Diseñador de clases de Visual Studio, es posible diseñar, visualizar y refactorizar diagramas de clases en proyectos de C#, Visual Basic o C++. Los diagramas de clases muestran los elementos de código y sus relaciones en una superficie de diseño visual, lo que podría ayudarle a comprender mejor la estructura del proyecto y reorganizar el código.
Nota:
El Diseñador de clases no está disponible en proyectos de .NET Core y .NET 5 y versiones posteriores.
Acerca de los diagramas de clases
Esto es lo que se puede hacer con diagramas de clases de forma detallada:
Diseñar: edite el código del proyecto modificando el diagrama de clases. Agregar nuevos elementos y eliminar los que no quiera. Los cambios se reflejan en el código.
Visualizar: comprenda la estructura del proyecto viendo las clases del proyecto en un diagrama. Personalice el diagrama para poder centrarse en los detalles del proyecto que más le importan. Guarde el diagrama para utilizarlo más adelante en demostraciones o documentación.
Refactorizar: reemplace métodos, cambie el nombre de los identificadores, refactorice parámetros e implemente interfaces y clases abstractas.
Ver tipos y relaciones
Los diagramas de clases muestran los detalles de los tipos (por ejemplo, sus miembros constituyentes) y las relaciones que tienen entre ellos. La visualización de estas entidades es una vista dinámica del código. Esto significa que puede editar tipos en el diseñador y, después, ver los cambios reflejados en el código fuente de la entidad. Del mismo modo, el diagrama de clases se mantiene sincronizado con los cambios que haga en los archivos del código.
Nota:
Si el proyecto contiene un diagrama de clases y además hace referencia a un tipo que se encuentra en otro proyecto, el diagrama de clases no mostrará el tipo al que se hace referencia hasta que se compile el proyecto para ese tipo. Del mismo modo, el diagrama no mostrará los cambios en el código de la entidad externa hasta que se recompile el proyecto para esa entidad.
Flujo de trabajo de los diagramas de clases
Los diagramas de clases pueden ayudarle a entender la estructura de clases de los proyectos. Es posible que estos proyectos los hayan creado otros desarrolladores o que solo necesite un actualizador en un proyecto que haya creado. Puede usar los diagramas de clases para personalizar, compartir y presentar información de proyectos con otros usuarios.
El primer paso para presentar la información del proyecto es crear un diagrama de clases que muestre lo que quiera mostrar. Para más información, vea Agregar un diagrama de clases. Puede crear varios diagramas de clases para un proyecto y utilizarlos para mostrar una vista única del proyecto, un subconjunto determinado de tipos del proyecto o un subconjunto determinado de miembros de tipos.
Además de definir lo que muestra cada diagrama de clases, puede cambiar la forma en la que se presenta la información. Para más información, vea Personalizar los diagramas de clases.
Después de ajustar uno o varios diagramas de clases, puede copiarlos a documentos de Microsoft Office e imprimirlos o exportarlos como archivos de imagen. Para obtener más información, consulte Copiar elementos del diagrama de clases en un documento de Microsoft Office, Imprimir diagramas de clases y Exportar los diagramas de clases como imágenes.
Nota:
El Diseñador de clases no realiza un seguimiento de la ubicación de los archivos de origen, por lo que cambiar la estructura del proyecto o mover los archivos de origen del proyecto puede hacer que el Diseñador de clases pierda de vista el tipo, especialmente el tipo de origen de una typedef, de clases base o de tipos de asociación. Puede que reciba un error, como El Diseñador de clases no puede mostrar este tipo. Si lo recibe, arrastre otra vez el código fuente modificado o reubicado al diagrama de clases para volver a mostrarlo.
Agregar diagramas de clases a proyectos
Para diseñar, editar y refactorizar clases y otros tipos, agregue un diagrama de clases al proyecto de C#, Visual Basic o C++. Para visualizar distintas partes del código de un proyecto, agregue varios diagramas de clases al proyecto.
No se pueden crear diagramas de clases de proyectos que compartan código en varias aplicaciones. Para crear diagramas de clases UML, vea Cómo: Crear proyectos y diagramas de modelado UML.
Instalar el componente del Diseñador de clases
Si no ha instalado el componente del Diseñador de clases, siga estos pasos para hacerlo.
Abra el Instalador de Visual Studio desde el menú Inicio de Windows o seleccionando Herramientas>Obtener herramientas y características en la barra de menús de Visual Studio.
Se abrirá el Instalador de Visual Studio.
Si ya tiene Visual Studio instalado, haga clic en el botón Modificar de las opciones.
Seleccione la pestaña Componentes individuales y, después, desplácese hacia abajo hasta la categoría Herramientas de código.
Seleccione Diseñador de clases y Modificar.
El componente del Diseñador de clases empezará a instalarse.
Agregar un diagrama de clases en blanco a un proyecto
En el Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto y, después, elija Agregar>Nuevo elemento. También puede presionar Ctrl+Mayús+A. Si aparece una ventana pequeña con solo la opción para agregar un archivo de código, elija el botón Mostrar todas las plantillas.
Se abrirá el cuadro de diálogo Agregar nuevo elemento.
Expanda General y, después, seleccione Diagrama de clases en la lista de plantillas. Para los proyectos de Visual C++, busque en la categoría Utilidad la plantilla Diagrama de clases.
Nota:
Si no ve la plantilla Diagrama de clases, siga los pasos para instalar el componente del Diseñador de clases de Visual Studio. Como se indicó anteriormente en este artículo, el Diseñador de clases no está disponible para .NET Core y .NET 5 y versiones posteriores.
El diagrama de clases se abre en el Diseñador de clases y aparece como un archivo que tiene la extensión .cd en el Explorador de soluciones. Puede arrastrar formas y líneas al diagrama desde el cuadro de herramientas o arrastrar un nodo de proyecto desde Explorador de soluciones para agregar las clases en ese proyecto.
Para agregar varios diagramas de clases, repita los pasos de este procedimiento.
Para mostrar los contenidos de un proyecto completo en un diagrama de clases
Abra un diagrama de clases en blanco y arrastre el nodo del proyecto de Explorador de soluciones a la superficie del diagrama de clases. Se crea un diagrama de clases que se rellena automáticamente.
Importante
El Diseñador de clases aún no está disponible en proyectos de .NET Core.
Personalizar diagramas de clases
Es posible cambiar la manera en que se muestra la información en los diagramas de clases. Se puede personalizar el diagrama entero o los tipos individuales en la superficie de diseño.
Por ejemplo, se puede ajustar el nivel de zoom de un diagrama de clase completo, cambiar cómo se agrupan y ordenan determinados miembros de tipo, ocultar o mostrar relaciones, así como mover conjuntos de tipos o tipos individuales en cualquier parte del diagrama.
Nota
Personalizar la manera en que las formas aparecen en el diagrama no cambia el código subyacente para los tipos representados en el diagrama.
Las secciones que contienen miembros de tipo, como la sección Propiedades de una clase, se denominan compartimientos. Puede ocultar o mostrar los compartimientos y los miembros de tipo individualmente.
Acercar y alejar el diagrama de clase
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
En la barra de herramientas Diseñador de clases, haga clic en el botón Acercar o Alejar para cambiar el nivel de zoom de la superficie del diseñador.
or
Especifique un valor de zoom determinado. Puede usar la lista desplegable Zoom o escribir un nivel de zoom válido (el intervalo válido está comprendido entre el 10 % y el 400 %).
Nota:
Al cambiar el nivel de zoom, no se ve afectada la escala de la copia impresa del diagrama de clases.
Personalizar la agrupación y ordenación de los miembros de tipo
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
Haga clic con el botón secundario en un área vacía de la superficie de diseño y elija Miembros del grupo.
Seleccione una de las opciones disponibles:
Agrupar por tipo separa los miembros de tipo individuales en una lista agrupada de Propiedades, Métodos, Eventos y Campos. Cada grupo depende de la definición de las entidades: por ejemplo, una clase no muestra ningún grupo de eventos si todavía no hay ningún evento definido para esa clase.
Agrupar por acceso separa los miembros de tipo individuales en una lista agrupada según los modificadores de acceso del miembro. Por ejemplo, Público y Privado.
Ordenar alfabéticamente muestra los elementos que constituyen una entidad como una única lista ordenada alfabéticamente. La lista se ordena de menor a mayor.
Ocultar los compartimientos de un tipo
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
Haga clic con el botón secundario en la categoría de miembro del tipo que desea personalizar (por ejemplo, seleccione el nodo Métodos de una clase.
Haga clic en Ocultar compartimiento.
El compartimiento seleccionado desaparece del contenedor del tipo.
Ocultar miembros individuales de un tipo
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
Haga clic con el botón secundario en el miembro del tipo que desea ocultar.
Haga clic en Ocultar.
El miembro seleccionado desaparece del contenedor del tipo.
Mostrar los compartimientos y miembros ocultos de un tipo
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
Haga clic con el botón secundario en el nombre del tipo con el compartimiento oculto.
Haga clic en Mostrar todos los miembros.
Todos los compartimientos y miembros ocultos aparecen en el contenedor del tipo.
Ocultar relaciones
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
Haga clic con el botón secundario en la línea de asociación o herencia que desea ocultar.
Haga clic en Ocultar para las líneas de asociación y en Ocultar línea de herencia para las líneas de herencia.
Haga clic en Mostrar todos los miembros.
Todos los compartimientos y miembros ocultos aparecen en el contenedor del tipo.
Mostrar relaciones ocultas
Abra y seleccione un archivo de diagrama de clases en Diseñador de clases.
Haga clic con el botón secundario en el tipo con la asociación o herencia oculta.
Haga clic en Mostrar todos los miembros para las líneas de asociación y en Mostrar clase base o Mostrar clases derivadas para las líneas de herencia.
Quitar una forma de un diagrama de clase
Se puede quitar una forma de tipo del diagrama de clase sin que ello afecte al código subyacente del tipo. Al quitar las formas de tipo de un diagrama de clases solo se ve afectado ese diagrama: no se ve afectado el código subyacente que define el tipo ni tampoco otros diagramas que muestran el tipo.
En el diagrama de clases, seleccione la forma de tipo que desee quitar del diagrama.
En el menú Edición, elija Quitar del diagrama.
La forma de tipo y cualquier línea de asociación o herencia conectada a ella dejan de aparecer en el diagrama.
Eliminar una forma de tipo y su código subyacente
Haga clic con el botón secundario del mouse en la forma, en la superficie de diseño.
Seleccione Eliminar código en el menú contextual.
La forma se quita del diagrama y su código subyacente se elimina del proyecto.
Copiar elementos de un diagrama de clases en un documento de Microsoft Office
Puede copiar las formas de un diagrama de clases de .NET (archivo .cd) en otros documentos. Obtendrá una copia de la forma o su código subyacente según el tipo de documento donde lo pegue. Para copiar las formas de diagramas de clase UML en un proyecto de modelado, vea Exportar diagramas como imágenes.
Copiar un elemento único
Haga clic con el botón secundario en la forma y elija Copiar imagen.
Copiar varios elementos
Seleccione las formas en el diagrama que desea copiar.
Haga clic con el botón secundario en la selección y elija Copiar imagen.
Copiar todos los elementos en un diagrama de clases
Haga clic con el botón derecho en la superficie del diagrama y elija Seleccionar todo, o bien presione Ctrl+A.
En el menú Edición, seleccione Copiar imagen.
También puede elegir Copiar en lugar de Copiar imagen. Copiar copia la imagen como un mapa de bits normal. Copiar imagen copia la imagen como una imagen basada en vectores, que es mejor para la mayoría de las aplicaciones de Office.
Exportar diagramas de clases como imágenes
Para exportar un diagrama de clase creado a partir de código del proyecto, guárdelo como una imagen. Si quiere exportar los diagramas de clase UML en su lugar, consulte Exportar diagramas como imágenes.
Exportar un diagrama
Abra el archivo de diagrama de clases (.cd).
En el menú Diagrama de clase o en el menú contextual de la superficie del diagrama, elija Exportar diagrama como imagen.
Seleccione un diagrama.
Seleccione el formato que quiera.
Elija Exportar para finalizar la exportación.
Para actualizar automáticamente las imágenes exportadas que están vinculadas a otros documentos, exporte de nuevo el diagrama en Visual Studio.
Imprimir diagramas de clases
También puede imprimir un diagrama de clase mediante la función de impresión de Visual Studio.
Para imprimir un diagrama de clases
Abra el diagrama de clases.
Haga clic en Imprimir en el menú Archivo.
Se imprimirá el diagrama de clases completo. Es posible que tenga que ajustar la configuración en el cuadro de diálogo Configurar página para poder imprimir en un tamaño adecuado.
Agregar comentarios a diagramas de clases
Puede usar formas de comentario para anotar diagramas de clases. Una forma de comentario tiene una propiedad, Text, en la que puede escribir texto. Las formas de comentario solo existen en la superficie del diagrama y no en el código.
Un comentario reside en la vista Diagrama de clases del Diseñador de clases. Si abre un segundo diagrama de clases en el mismo proyecto, los comentarios que ha creado en la primera vista no están visibles. Si elimina un diagrama, también se eliminarán todos los comentarios que contiene.
Puede cambiar el tamaño de una forma de comentario, pero no puede cambiar otros aspectos de su apariencia, como el color de fondo, la fuente o el tamaño de fuente.
Para agregar un comentario
Arrastre un comentario del Cuadro de herramientas del Diseñador de clase al diagrama de clases.
Haga clic en la nueva forma de comentario en el diagrama y escriba el texto que quiera.
Uso de los métodos abreviados de teclado y del mouse en la ventana Diagrama de clases y Detalles de clases
Puede usar el teclado junto con el mouse para llevar a cabo acciones de navegación en el Diseñador de clases y en la ventana Detalles de clase.
Usar el mouse en el Diseñador de clases
Se admiten las siguientes acciones del mouse en los diagramas de clases:
| Combinación del mouse | Contexto | Descripción |
|---|---|---|
| Doble clic | Shape (elementos) | Se abre el editor de código. |
| Doble clic | Conector de círculo | Expandir o contraer el círculo. |
| Doble clic | Etiqueta del conector de círculo | Invoca el comando Mostrar interfaz. |
| Rueda del mouse | Diagrama de clases | Desplazamiento vertical. |
| Mayús + rueda del mouse | Diagrama de clases | Desplazamiento horizontal. |
| Ctrl + rueda del mouse | Diagrama de clases | Zoom. |
| Ctrl+Mayús + clic | Diagrama de clases | Zoom. |
Usar el mouse en la ventana Detalles de clase
Puede usar un mouse para cambiar la apariencia de la ventana Detalles de clase y los datos que muestra de las siguientes maneras:
Haga clic en cualquier celda modificable para editar su contenido. Los cambios se reflejan en todos los lugares en los que se almacenan o muestran los datos, así como en la ventana Propiedades y en el código fuente.
Haga clic en cualquier celda de una fila para que la ventana Propiedades muestre las propiedades del elemento representado por la fila.
Para cambiar el ancho de una columna, arrastre el límite del lado derecho del encabezado de columna hasta obtener el ancho deseado.
Puede expandir o contraer nodos de compartimiento o de propiedad haciendo clic en los símbolos de flecha situados a la izquierda de la fila.
La ventana Detalles de clase dispone de varios botones para crear nuevos miembros en la clase actual y para navegar entre los compartimientos de los miembros en la cuadrícula de la ventana Detalles de clase.
Usar el teclado en el Diseñador de clases
Se admiten las siguientes acciones del teclado en los diagramas de clases:
| Key | Contexto | Descripción |
|---|---|---|
| Teclas de dirección | Dentro de las formas de tipo | Navegación de tipo árbol por el contenido de la forma (permite efectuar un recorrido cíclico). Las teclas izquierda y derecha expanden y contraen el elemento actual, si es expansible, y navegan al elemento primario si no lo es (consulte los métodos de navegación por la vista de árbol para obtener información detallada sobre su comportamiento). |
| Teclas de dirección | Formas de nivel superior | Mover las formas en el diagrama. |
| Mayús+teclas de dirección | Dentro de las formas de tipo | Crear una selección continua compuesta por elementos de forma, como miembros, tipos anidados o compartimientos. Estos métodos abreviados no permiten el recorrido cíclico. |
| Página principal | Dentro de las formas de tipo | Navegar al título de la forma de nivel superior. |
| Página principal | Formas de nivel superior | Desplácese a la primera forma del diagrama. |
| Fin | Dentro de las formas de tipo | Navegar al último elemento visible dentro de la forma. |
| Fin | Formas de nivel superior | Navegar a la última forma del diagrama. |
| Mayús+Inicio | Dentro de la forma de tipo | Selecciona los elementos que contiene la forma, empezando por el elemento actual y finalizando con el elemento de nivel superior de la misma forma. |
| Mayús+Fin | Dentro de la forma de tipo | Igual que Mayús+Inicio, pero en dirección descendente. |
| Entrar | Todos los contextos | Invoca la acción predeterminada de la forma (también disponible con doble clic). En la mayoría de los casos se trata de la acción Ver código, pero en algunos elementos varía (círculos, encabezados de compartimiento o etiquetas de círculo). |
| + y - | Todos los contextos | Si el elemento que tiene el foco es expansible, estas teclas expanden o contraen el elemento. |
| > | Todos los contextos | En los elementos con elementos secundarios, expande el elemento (si se contrae) y navega al primer elemento secundario. |
| < | Todos los contextos | Se desplaza al elemento primario. |
| Alt+Mayús+L | Interior de las formas de tipo y sobre las formas de tipo. | Navega al círculo (si existe) de la forma seleccionada actualmente. |
| Alt+Mayús+B | Interior de las formas de tipo y sobre las formas de tipo. | Si la lista de tipos base se muestra en la forma de tipo y tiene más de un elemento, alterna el estado de expansión de la lista (contraer/expandir). |
| Eliminar | Sobre las formas de tipo y de comentario | Invoca el comando Quitar del diagrama. |
| Eliminar | Sobre cualquier otra cosa. | Invoca el comando Eliminar del código (miembros, parámetros, asociaciones, herencia, etiquetas de círculo). |
| Ctrl+Supr | Todos los contextos | Invoca el comando Eliminar del código en la selección. |
| Tabulación | Todos los contextos | Navega al siguiente elemento secundario del mismo elemento principal (permite el recorrido cíclico). |
| Mayús+Tabulador | Todos los contextos | Navega al elemento secundario anterior del mismo elemento primario (permite el recorrido cíclico). |
| Barra espaciadora | Todos los contextos | Alterna la selección sobre el elemento actual. |
Usar el teclado en la ventana Detalles de clase
Nota:
Los siguientes enlaces de teclado imitan la experiencia de escritura de código.
Use las siguientes teclas para navegar por la ventana Detalles de clase:
| Key | Resultado |
|---|---|
| , (coma) | Si el cursor está en una fila de parámetro, al escribir una coma, se mueve al campo Nombre del parámetro siguiente. Si el cursor está en la última fila de parámetro de un método, se mueve al campo <Agregar parámetro>, que permite crear un parámetro. Si el cursor está en otra parte de la ventana Detalles de clase, al escribir una coma se agrega literalmente una coma al campo actual. |
| ; (punto y coma) o ) (paréntesis de cierre) | Mueve el cursor al campo Nombre de la siguiente fila de miembro en la cuadrícula de la ventana Detalles de clase. |
| Tabulación | Mueve el cursor al siguiente campo, primero de izquierda a derecha y luego de arriba abajo. Si el cursor se está moviendo desde un campo en el que se ha escrito texto, Detalles de clase procesa ese texto y lo almacena, siempre que no genere ningún error. Si el cursor está en un campo vacío, como <Agregar parámetro>, la tecla Tabulador lo mueve al primer campo de la fila siguiente. |
| Barra espaciadora | Mueve el cursor al siguiente campo, primero de izquierda a derecha y luego de arriba abajo. Si el cursor está en un campo vacío, como <Agregar parámetro>, lo mueve al primer campo de la fila siguiente. Tenga en cuenta que si se escribe <space> justo después de una coma, se pasará por alto. Si el cursor está en el campo Resumen, al escribir un espacio se agrega un carácter de espacio. Si el cursor está en la columna Ocultar de una fila determinada, al escribir un espacio se alterna el valor de la casilla Ocultar. |
| Ctrl+Tab | Cambiar a otra ventana del documento. Por ejemplo, cambia de la ventana Detalles de clase a un archivo de código abierto. |
| Esc | Si ha empezado a escribir texto en un campo, ESC actúa como tecla «deshacer» y restablece el contenido del campo a su valor anterior. Si la ventana Detalles de clase tiene el foco general sin que ninguna celda concreta tenga el foco, la tecla ESC quita el foco de la ventana Detalles de clase. |
| Flecha arriba y flecha abajo | Estas teclas mueven el cursor fila a fila, verticalmente, en la cuadrícula de la ventana Detalles de clase. |
| Flecha izquierda | Si el cursor está en la columna Nombre, al presionar la flecha izquierda se contrae el nodo actual de la jerarquía (si está abierto). |
| Flecha derecha | Si el cursor está en la columna Nombre, al presionar la flecha derecha se expande el nodo actual de la jerarquía (si está contraído). |
Sugerencia
Para obtener una lista completa de métodos abreviados de teclado, consulte Métodos abreviados de teclado en Visual Studio.