Pizarrón a mano alzada¶
El tipo Mano Alzada es un pizarrón libre para pensar sin sintaxis: dibuja formas, flechas, texto y trazos con un aspecto hecho a mano. Cuando la idea madura, conviértela en un diagrama Mermaid con un clic.
Para crear uno, elige Mano Alzada como Tipo de diagrama al crear un diagrama. El pizarrón se guarda automáticamente, igual que cualquier otro diagrama.
Herramientas¶
| Herramienta | Atajo | Uso |
|---|---|---|
| Seleccionar | V | Selecciona, mueve, redimensiona y rota elementos |
| Mano | H | Mueve el lienzo |
| Rectángulo | R | Caja |
| Rombo | D | Decisión |
| Elipse | O | Círculo u óvalo |
| Flecha | A | Flecha; si la sueltas sobre una forma, queda conectada a ella |
| Línea | L | Línea sin punta |
| Texto | T | Texto libre |
| Mano alzada | P | Trazo libre, sensible a la presión del lápiz |
| Borrador | E | Borra elementos |
Texto rápido
Haz doble clic en una forma para escribir dentro de ella, o doble clic en un espacio vacío (con Seleccionar) para crear un texto. Enter confirma y Esc cancela; Shift+Enter agrega un salto de línea.
Las flechas conectadas siguen a las formas cuando las mueves o rotas.
Estilo de los elementos¶
Con uno o varios elementos seleccionados, el panel Estilo del elemento te deja ajustar:
| Opción | Valores |
|---|---|
| Trazo y Relleno | Color del borde y del interior (o Sin relleno) |
| Grosor | Ancho del trazo |
| Estilo de trazo | Limpio, Arquitecto, Artista, Caricatura |
| Estilo de relleno | Sólido, Rayado, Cruzado |
| Fuente | Manuscrita, Normal, Código; y Tamaño de fuente |
| Líneas y flechas | Línea discontinua, Flecha inicial, Flecha final |
| Formas | Esquinas redondeadas |
El aspecto «hecho a mano» se dibuja con Rough.js y es estable: un elemento no cambia de forma cada vez que se redibuja.
Organizar elementos¶
- Duplicar, Agrupar / Desagrupar.
- Orden: Traer al frente, Traer adelante, Enviar atrás, Enviar al fondo.
- Alineación (izquierda, centro, derecha, arriba, medio, abajo) y Distribuir horizontalmente / verticalmente.
- Guías de alineación al mover elementos.
- Menú contextual con clic derecho.
- Limpiar todo borra el pizarrón (se puede deshacer).
Bloquear elementos¶
Bloquear fija los elementos seleccionados para no moverlos por accidente (también con Ctrl+Shift+L / Cmd+Shift+L o desde el menú contextual). Un elemento bloqueado no se puede arrastrar, redimensionar, rotar, mover con flechas, alinear, cambiar de estilo, cortar ni borrar hasta que pulses Desbloquear.
Navegar por el lienzo¶
| Acción | Cómo |
|---|---|
| Mover el lienzo | Rueda del ratón, herramienta Mano, mantener Space y arrastrar, o clic central |
| Zoom | Ctrl / Cmd + rueda (centrado en el cursor) o los botones de zoom |
| Ajustar al contenido | F |
La posición y el zoom del pizarrón se guardan con el diagrama.
Atajos de teclado¶
| Atajo | Acción |
|---|---|
| Ctrl+Z / Cmd+Z | Deshacer |
| Ctrl+Shift+Z o Ctrl+Y | Rehacer |
| Ctrl+A | Seleccionar todo |
| Ctrl+C / Ctrl+X / Ctrl+V | Copiar / cortar / pegar (se pega en la posición del cursor) |
| Ctrl+D | Duplicar |
| Ctrl+G / Ctrl+Shift+G | Agrupar / desagrupar |
| Ctrl+Shift+L | Bloquear / desbloquear |
| Del o Backspace | Borrar la selección |
| Flechas (Shift = 10 px) | Mover la selección |
| Esc | Quitar la selección y volver a Seleccionar |
| F | Ajustar al contenido |
En macOS usa Cmd en lugar de Ctrl.
Exportar el pizarrón¶
Desde Exportar Diagrama, los pizarrones se exportan como PNG con resolución Pantalla (1x), Estándar (2x) o Alta (3x) y la opción Fondo transparente. La imagen abarca todo el contenido dibujado (incluidos elementos rotados); en lienzos muy grandes la escala se reduce automáticamente para no exceder los límites del navegador, sin recortar nada.
También puedes Descargar código fuente como archivo .freehand.json, que se puede volver a importar. Los archivos de Excalidraw (.excalidraw) se importan como pizarrones. Consulta Exportar e importar.
Boceto → Mermaid¶
En un pizarrón, el menú Convertir tipo de diagrama ofrece Boceto → Mermaid, que crea un diagrama Mermaid nuevo (el pizarrón no se modifica). La conversión es determinista y no usa IA:
flowchart LR
R[Rectángulo con texto] --> N1["Nodo [ ]"]
D[Rombo con texto] --> N2["Nodo { }"]
E[Elipse con texto] --> N3["Nodo ( )"]
F[Flecha conectada a dos formas] --> L[Relación]| En el pizarrón | En Mermaid |
|---|---|
| Rectángulo / rombo / elipse con texto | Nodo [ ] / { } / ( ) |
| Flecha conectada a dos formas | Relación --> (el texto de la flecha es la etiqueta) |
| Flecha discontinua | -.-> |
| Flecha con dos puntas | <--> |
| Línea sin punta | --- |
| Flecha que sale y llega a la misma forma | Relación consigo misma |
Lo que se omite
Los trazos a mano alzada, los textos sueltos, las flechas sin conectar y las formas sin texto no tienen equivalente estructural: se omiten y DiagramaHub te dice cuántos de cada tipo quedaron fuera.