Integración de Diagramas - Archyl Docs

Integra diagramas interactivos de Archyl en Confluence, Notion, Miro y otras plataformas

Integración de Diagramas

Integra diagramas interactivos de Archyl en tus plataformas de documentación, wikis y herramientas de colaboración.

Plataformas Soportadas

Archyl soporta integración en herramientas de colaboración populares:

Plataforma Método Interactividad
Confluence Macro Iframe Completa
Notion Comando /embed Completa
Miro App Embed Completa
SharePoint Web part Embed Completa
PowerPoint Add-in Web Viewer Limitada
Cualquier sitio web Código iframe Completa

Creando una Integración

Paso 1: Crear un Enlace de Compartir

  1. Abre tu proyecto
  2. Haz clic en Compartir en la barra de herramientas
  3. Haz clic en Crear Nuevo Enlace de Compartir
  4. Configura opciones:
    • Nombre (ej: "Integración Confluence")
    • Expiración (opcional)
  5. Copia el enlace generado

Paso 2: Obtener Código de Integración

  1. En el diálogo de Compartir, haz clic en la pestaña Integrar
  2. Selecciona tu plataforma objetivo
  3. Copia el código proporcionado

Instrucciones por Plataforma

Confluence

Usando Macro Iframe:

  1. Edita tu página de Confluence
  2. Inserta la macro iframe o HTML
  3. Pega el código de integración:
<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Usando Widget Connector:

  1. Inserta la macro Widget Connector
  2. Pega la URL de compartir directamente
  3. Ajusta ancho y alto

Notion

  1. En una página de Notion, escribe /embed
  2. Selecciona Embed
  3. Pega tu URL de compartir
  4. Haz clic en Embed link
  5. Redimensiona la integración según necesites

Miro

  1. Abre tu tablero de Miro
  2. Haz clic en el icono Apps
  3. Busca Embed o iFrame
  4. Añade la app a tu tablero
  5. Pega la URL de compartir
  6. Posiciona y redimensiona

SharePoint

  1. Edita tu página de SharePoint
  2. Añade el web part Embed
  3. Pega el código de integración
  4. Guarda la página

PowerPoint

  1. Instala el add-in Web Viewer
  2. Inserta el add-in en una diapositiva
  3. Ingresa la URL de compartir
  4. Nota: Interactividad limitada en modo presentación

Sitio Web Genérico

Añade este HTML a cualquier página web:

<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  style="border: none; border-radius: 8px;"
  allowfullscreen
></iframe>

Funciones de la Vista Integrada

La vista integrada proporciona:

Encabezado Mínimo

  • Nombre del proyecto
  • Nivel C4 actual
  • Navegación por migas de pan
  • Insignia Powered by Archyl

Interactividad Completa

  • Pan y zoom del diagrama
  • Doble clic para profundizar
  • Navegar por todos los niveles C4
  • Ver detalles de elementos

Layout Responsivo

  • Se adapta a cualquier tamaño de contenedor
  • Funciona en barras laterales estrechas
  • Escala en dispositivos móviles
  • Diseño limpio y sin distracciones

Opciones de Personalización

Tamaño

Ajusta ancho y alto en el código de integración:

<iframe
  src="..."
  width="800"
  height="600"
></iframe>

O usa porcentajes:

<iframe
  src="..."
  width="100%"
  height="80vh"
></iframe>

Vista Inicial

Añade parámetros para controlar la vista inicial:

?level=container    # Comenzar en nivel Contenedor
?level=component    # Comenzar en nivel Componente

Estilo

Añade estilos personalizados al contenedor:

<div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
  <iframe src="..." width="100%" height="600" frameborder="0"></iframe>
</div>

Mejores Prácticas

Mantén los Enlaces Actualizados

  • Actualiza enlaces de compartir cuando cambie la arquitectura
  • Establece fechas de expiración razonables
  • Crea enlaces separados para diferentes contextos

Optimiza para Visores

  • Comienza en el nivel C4 apropiado para tu audiencia
  • Resumen ejecutivo: Contexto del Sistema
  • Visión técnica: Contenedor
  • Detalles de implementación: Componente

Documenta la Integración

Añade contexto alrededor de tu diagrama integrado:

  • Breve descripción de lo que se muestra
  • Cuándo se actualizó el diagrama por última vez
  • Enlace al proyecto completo de Archyl para editores

Maneja Enlaces Expirados

Si un enlace de compartir expira:

  1. Crea un nuevo enlace de compartir
  2. Actualiza el código de integración
  3. Informa a las partes interesadas si es necesario

Solución de Problemas

La Integración No Carga

  • Verifica que el enlace de compartir no haya expirado
  • Verifica que la URL sea correcta
  • Verifica restricciones de Content Security Policy
  • Prueba en una ventana incógnito

Problemas de Interactividad

  • Algunas plataformas restringen interacciones iframe
  • PowerPoint tiene soporte limitado durante presentaciones
  • Verifica limitaciones específicas de la plataforma

Problemas de Tamaño

  • Usa unidades viewport (vh, vw) para dimensionado responsivo
  • Establece altura mínima (500px recomendado)
  • Prueba en diferentes tamaños de pantalla

Próximos Pasos