AchieveApex: app whiteboards

Generado desde achieveApex-Frontend/public/ai-docs el 2026-10-15. Contiene 10 archivos de la app whiteboards. Para el contexto general del producto ver apex-resumen.md.

id: whiteboards app: whiteboards nombre: Whiteboards estado: shipped permiso: can_access_whiteboards

Whiteboards

Canvas de colaboración visual para ideas, diagramas, nodos CRM/Operations y generación con IA. Esta app es un módulo único; sus capacidades viven directamente en esta carpeta.

Para que sirve

Una agencia diseña el flujo de una campaña con notas, enlaces y entregables en un solo canvas.
Un equipo comercial relaciona contactos, deals y productos con un mapa de cuenta para preparar una oportunidad.
Una empresa de servicios visualiza tareas y roadmap de un proyecto junto con sus decisiones y recursos.
Un equipo de producto convierte un brief en un diagrama inicial con IA y lo ajusta antes de compartirlo externamente.

Que lo hace diferente

El canvas puede vincular tarjetas vivas de contactos, deals, productos, tareas y proyectos de Apex, en lugar de limitarse a contenido dibujado.
Los módulos de Operations incorporan vistas de tareas y roadmap dentro del whiteboard para quien tiene acceso a esa app.
Whiteboard AI crea y conecta nodos, organiza layouts y genera imágenes sobre el documento existente, con control de versiones.
Puede compartirse con un enlace público de solo lectura; los nodos CRM muestran una instantánea y los módulos de Operations no exponen datos sin iniciar sesión.

Acceso

Ruta principal: /[orgId]/whiteboards
Como se llega: Header app switcher > Whiteboards
Permiso requerido: can_access_whiteboards

Alcance tecnico

Frontend: lista, editor React Flow y vista pública de Whiteboards
Backend: documentos, versiones, IA y links públicos
Superficies públicas: /wb/[token]
Integraciones externas: S3, OpenRouter, CRM y Operations

Funcionalidades internas

Funcionalidad	Archivo	Resumen
Crear un whiteboard	create-whiteboard.md	CreateWhiteboardDialog.tsx
Administrar carpetas y acceso	whiteboard-access.md	WhiteboardAccessDialog.tsx
Editar canvas y nodos	canvas-nodes.md	WhiteboardEditorView.tsx, WhiteboardNodes.tsx
Conectar nodos y organizar layouts	connections-layout.md	WhiteboardEditorView.tsx, layoutEngine.ts
Añadir multimedia y enlaces	media-and-links.md	WhiteboardNodes.tsx
Vincular CRM y Operations en vivo	live-crm-operations.md	CrmLiveNodes.tsx, OperationsLiveCards.tsx
Crear con Whiteboard AI	whiteboard-ai.md	WhiteboardAIChat.tsx, useWhiteboardBuilderAI.ts
Deshacer y restaurar cambios	versions-undo.md	WhiteboardEditorView.tsx, WhiteboardAIChat.tsx
Compartir whiteboard públicamente	public-whiteboard.md	WhiteboardPublicView.tsx

Relaciones

Depende de: Organizations, wallet y permisos de CRM/Operations cuando se usan nodos vivos.
Usado por: equipos internos y espectadores externos autorizados por enlace.

Limitaciones y notas

Los cambios manuales se guardan automáticamente.
La colaboración simultánea en tiempo real no quedó confirmada como capacidad documentable en las superficies revisadas.

id: canvas-nodes modulo: whiteboards app: whiteboards nombre: Editar canvas y nodos tipo: accion

Editar canvas y nodos

Compone mapas, diagramas y brainstorms con formas, notas, tarjetas, frames y grupos.

Que se logra

Resultado: ideas, decisiones y elementos de trabajo quedan representados en un mapa visual que el equipo puede reorganizar.
Caso de uso: una empresa de software convierte un taller de descubrimiento en un diagrama con agrupaciones, responsables y fechas.
Se combina con: conexiones y layouts, multimedia, nodos CRM/Operations, versiones y Whiteboard AI.

Donde esta

Ruta: /[orgId]/whiteboards/[whiteboardId]
Acceso en UI: Left toolbar
Componente(s): WhiteboardEditorView.tsx, WhiteboardNodes.tsx

Como funciona

Elija una herramienta en la barra izquierda.
Haga clic en el canvas para colocar el nodo.
Seleccione el nodo para editar, cambiar estilo o redimensionar.
Seleccione varios para recolorear, cambiar tipo, agrupar o eliminar.

Reglas y validaciones

Escape o V vuelve a selección.
Los frames y grupos pueden contener nodos; al eliminarlos los hijos permanecen.
Los nodos bloqueados no se arrastran ni redimensionan.

Backend

Servicios: whiteboards (patch).
Efectos: el guardado automático persiste el documento.

Relaciones

Requiere: whiteboard editable.
Afecta: historial y layout.

id: connections-layout modulo: whiteboards app: whiteboards nombre: Conectar nodos y organizar layouts tipo: accion

Conectar nodos y organizar layouts

Crea conexiones y reorganiza la posición de los nodos en Free, Tree down, Tree right o Radial.

Que se logra

Resultado: el canvas comunica relaciones y jerarquías con conexiones legibles y una distribución que reduce solapamientos.
Caso de uso: un equipo de operaciones convierte una lista de dependencias en un árbol de ejecución para detectar bloqueos.
Se combina con: edición de nodos, Whiteboard AI y versiones.

Donde esta

Ruta: /[orgId]/whiteboards/[whiteboardId]
Acceso en UI: Node handle / toolbar layout
Componente(s): WhiteboardEditorView.tsx, layoutEngine.ts

Como funciona

Arrastre entre handles (arriba, abajo, izquierda o derecha) para conectar nodos.
Pase sobre una conexión para definir ruta, guiones, flechas o color.
Use Line y dos clics para una anotación libre.
Elija un layout en la barra superior. Las líneas de árbol bajan o van a la derecha según el layout; en Free se elige el lado más cercano (arriba/abajo si las cajas están apiladas).

Reglas y validaciones

El layout cambia posiciones, no nodos ni conexiones.
En árboles, el origen es padre y el destino hijo.
Las líneas libres no participan en el auto-layout.

Backend

Servicios: whiteboards (patch).
Efectos: ELK calcula posiciones y resuelve solapamientos.

Relaciones

Requiere: whiteboard editable.
Afecta: documento y versión.

id: create-whiteboard modulo: whiteboards app: whiteboards nombre: Crear un whiteboard tipo: accion

Crear un whiteboard

Crea un canvas con una idea central y permite elegir una carpeta y el layout inicial.

Que se logra

Resultado: un espacio visual inicial queda listo para estructurar una idea, proceso o proyecto.
Caso de uso: un equipo de consultoría crea un canvas radial para ordenar los temas de un diagnóstico de cliente.
Se combina con: nodos, conexiones, layouts, Whiteboard AI y acceso.

Donde esta

Ruta: /[orgId]/whiteboards
Acceso en UI: Whiteboards > New whiteboard``
Componente(s): CreateWhiteboardDialog.tsx

Como funciona

Abra Whiteboards.
Seleccione New whiteboard.
Indique nombre, layout y carpeta opcional.
Confirme para abrir el editor.

Reglas y validaciones

El nombre es obligatorio.
Puede cambiar layout o carpeta posteriormente.

Backend

Servicios: whiteboards (create).
Efectos: crea el documento inicial y la membresía de propietario.

Relaciones

Requiere: acceso a Whiteboards.
Afecta: editor y visibilidad.

id: live-crm-operations modulo: whiteboards app: whiteboards nombre: Vincular CRM y Operations en vivo tipo: integracion

Vincular CRM y Operations en vivo

Añade tarjetas vivas de CRM y Operations o módulos completos de tareas y roadmap vinculados a registros reales.

Que se logra

Resultado: el equipo conecta su planificación visual con información de clientes, oportunidades, productos, tareas y proyectos de Apex.
Caso de uso: una agencia prepara el plan de una cuenta con sus deals activos, responsables, tareas y roadmap en el mismo canvas.
Se combina con: CRM, Operations, acceso de whiteboards y enlaces públicos.

Donde esta

Ruta: /[orgId]/whiteboards/[whiteboardId]
Acceso en UI: Left toolbar > More>CRM/Operations``
Componente(s): CrmLiveNodes.tsx, OperationsLiveCards.tsx

Como funciona

Seleccione un tipo de CRM u Operations.
Colóquelo en el canvas.
Busque y vincule el contacto, deal, producto, tarea o proyecto.
Abra la tarjeta o interactúe con el módulo.

Reglas y validaciones

Las opciones aparecen solo con acceso a la app correspondiente.
La vista pública usa datos resumidos para tarjetas y muestra inicio de sesión para módulos completos de Operations.

Backend

Servicios: contacts, deals, products, ops-projects, ops-project-tasks a través de componentes; whiteboards (patch).

Relaciones

Requiere: permisos CRM u Operations según el nodo.
Afecta: vínculos y vista pública.

id: media-and-links modulo: whiteboards app: whiteboards nombre: Añadir multimedia y enlaces tipo: accion

Añadir multimedia y enlaces

Inserta imágenes, video, páginas web, archivos, enlaces y carruseles dentro del canvas.

Que se logra

Resultado: referencias visuales y materiales de trabajo permanecen junto al mapa que explica cómo se usan.
Caso de uso: una agencia reúne en el canvas el video, enlace, PDF e imágenes que sustentan una propuesta creativa.
Se combina con: edición de nodos, conexiones y enlace público.

Donde esta

Ruta: /[orgId]/whiteboards/[whiteboardId]
Acceso en UI: Left toolbar > More``
Componente(s): WhiteboardNodes.tsx

Como funciona

Abra More.
Elija el tipo de recurso y colóquelo en el canvas.
Cargue el archivo o pegue la URL.
Seleccione para editar o redimensionar.

Reglas y validaciones

Algunos sitios impiden ser mostrados en un iframe.
En el editor el primer clic selecciona nodos interactivos; en la vista pública interactúan al primer clic.
Los enlaces internos bloquean hosts privados.

Backend

Servicios: s3-url-signing, whiteboards (patch); API link-preview.
Efectos: archivos se cargan a S3 y enlaces consultan Open Graph.

Relaciones

Requiere: whiteboard editable.
Afecta: contenido del canvas.

id: public-whiteboard modulo: whiteboards app: whiteboards nombre: Compartir whiteboard públicamente tipo: publico

Compartir whiteboard públicamente

Comparte un canvas de solo lectura con cualquier persona que tenga el token.

Que se logra

Resultado: una persona externa consulta un canvas completo sin poder modificarlo ni acceder al resto de la organización.
Caso de uso: una consultora comparte el mapa de implementación con su cliente para alinear decisiones sin conceder acceso interno.
Se combina con: acceso de whiteboards, multimedia y nodos CRM/Operations.

Donde esta

Ruta: /wb/[token]
Acceso en UI: Editor toolbar > Share``
Componente(s): WhiteboardPublicView.tsx

Como funciona

Abra Share.
Active Public link.
Copie /wb/[token].
Desactive el switch para revocar el acceso.

Reglas y validaciones

Al volver a activar el enlace se conserva el mismo token.
La vista pública no permite editar ni acceder al resto de la organización.

Backend

Servicios: whiteboard-public (create), whiteboards (patch).

Relaciones

Requiere: whiteboard existente.
Afecta: espectadores externos.

id: versions-undo modulo: whiteboards app: whiteboards nombre: Deshacer y restaurar cambios tipo: accion

Deshacer y restaurar cambios

Combina undo/redo local para cambios manuales con restauración persistente para cambios de IA.

Que se logra

Resultado: el equipo puede revertir cambios recientes o recuperar un estado guardado sin rearmar el canvas desde cero.
Caso de uso: un equipo de producto deshace una reorganización automática de IA que no representaba su proceso.
Se combina con: edición de nodos, conexiones y layouts, y Whiteboard AI.

Donde esta

Ruta: /[orgId]/whiteboards/[whiteboardId]
Acceso en UI: Left toolbar > undo/redo; AI chat > Undo``
Componente(s): WhiteboardEditorView.tsx, WhiteboardAIChat.tsx

Como funciona

Use los controles de undo/redo para cambios recientes de la sesión.
Para deshacer el último cambio de IA, abra el chat y seleccione Undo.
Revise el estado restaurado.

Reglas y validaciones

Undo/redo local no es el mismo historial que las versiones persistidas.
Restaurar guarda un nuevo estado, por lo que también puede deshacerse.

Backend

Servicios: whiteboard-restore (create), whiteboard-versions (find), whiteboards (patch).

Relaciones

Requiere: whiteboard editable.
Afecta: documento y versión.

id: whiteboard-access modulo: whiteboards app: whiteboards nombre: Administrar carpetas y acceso tipo: configuracion

Administrar carpetas y acceso

Controla propietario, visibilidad y miembros de whiteboards y sus carpetas.

Que se logra

Resultado: el conocimiento visual se comparte con el equipo adecuado o se mantiene privado por board o carpeta.
Caso de uso: una agencia permite que el equipo de una cuenta consulte su tablero de planificación sin exponer otros clientes.
Se combina con: carpetas, nodos CRM/Operations y enlaces públicos.

Donde esta

Ruta: /[orgId]/whiteboards
Acceso en UI: Card/folder menu > Manage access``
Componente(s): WhiteboardAccessDialog.tsx

Como funciona

Abra el menú del canvas o carpeta.
Seleccione Manage access.
Elija visibilidad y miembros.
Guarde.

Reglas y validaciones

Private limita el acceso a propietario y miembros.
Una carpeta privada oculta los boards dentro de ella.
Las personas con rol Admin del recurso pueden gestionar acceso.

Backend

Servicios: whiteboard-collections, whiteboard-members, whiteboard-collection-members.

Relaciones

Requiere: acceso administrativo al recurso.
Afecta: listado y acceso al editor.

id: whiteboard-ai modulo: whiteboards app: whiteboards nombre: Crear con Whiteboard AI tipo: accion

Crear con Whiteboard AI

Construye y modifica el documento mediante prompts, con posibilidad de generar imágenes y usar conversaciones separadas.

Que se logra

Resultado: un brief se convierte en una estructura de nodos, conexiones, layout e imágenes que el equipo puede revisar y seguir editando.
Caso de uso: una consultora pide un mapa de actores y riesgos para un proyecto y luego ajusta los nodos resultantes en el canvas.
Se combina con: nodos, conexiones y layouts, recursos y versiones.

Donde esta

Ruta: /[orgId]/whiteboards/[whiteboardId]
Acceso en UI: Editor toolbar > AI``
Componente(s): WhiteboardAIChat.tsx, useWhiteboardBuilderAI.ts

Como funciona

Abra AI.
Seleccione un nodo si desea enfocar el pedido.
Escriba el prompt y envíelo.
Revise el canvas o use Undo en el chat.

Reglas y validaciones

Requiere wallet positiva.
Cada mutación verifica la versión actual del documento.
Las imágenes generadas se cobran por separado.

Backend

Servicios: whiteboard-builder-ai (create), whiteboard-builder-conversations, whiteboard-builder-messages.
Efectos: cobra wallet, guarda herramientas y crea versiones de documento.

Relaciones

Requiere: whiteboard.
Afecta: nodos, conexiones, recursos e historial.