Incorporação de Diagramas - Archyl Docs

Incorpore diagramas interativos do Archyl no Confluence, Notion, Miro e outras plataformas

Incorporação de Diagramas

Incorpore diagramas interativos do Archyl em suas plataformas de documentação, wikis e ferramentas de colaboração.

Plataformas Suportadas

O Archyl suporta incorporação em ferramentas de colaboração populares:

Plataforma Método Interatividade
Confluence Macro iframe Completa
Notion Comando /embed Completa
Miro App de incorporação Completa
SharePoint Web part de incorporação Completa
PowerPoint Add-in Web Viewer Limitada
Qualquer site Código iframe Completa

Criando uma Incorporação

Passo 1: Criar um Link de Compartilhamento

  1. Abra seu projeto
  2. Clique em Compartilhar na barra de ferramentas
  3. Clique em Criar Novo Link de Compartilhamento
  4. Configure as opções:
    • Nome (ex: "Incorporação Confluence")
    • Expiração (opcional)
  5. Copie o link gerado

Passo 2: Obter o Código de Incorporação

  1. No diálogo de compartilhamento, clique na aba Incorporar
  2. Selecione sua plataforma de destino
  3. Copie o código fornecido

Instruções por Plataforma

Confluence

Usando Macro Iframe:

  1. Edite sua página do Confluence
  2. Insira a macro iframe ou HTML
  3. Cole o código de incorporação:
<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Usando Widget Connector:

  1. Insira a macro Widget Connector
  2. Cole a URL de compartilhamento diretamente
  3. Ajuste largura e altura

Notion

  1. Em uma página do Notion, digite /embed
  2. Selecione Embed
  3. Cole sua URL de compartilhamento
  4. Clique em Incorporar link
  5. Redimensione a incorporação conforme necessário

Miro

  1. Abra seu board do Miro
  2. Clique no ícone de Apps
  3. Pesquise por Embed ou iFrame
  4. Adicione o app ao seu board
  5. Cole a URL de compartilhamento
  6. Posicione e redimensione

SharePoint

  1. Edite sua página do SharePoint
  2. Adicione a web part Incorporar
  3. Cole o código de incorporação
  4. Salve a página

PowerPoint

  1. Instale o add-in Web Viewer
  2. Insira o add-in em um slide
  3. Digite a URL de compartilhamento
  4. Nota: Interatividade limitada no modo de apresentação

Site Genérico

Adicione este HTML a qualquer página web:

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

Recursos da Visualização Incorporada

A visualização incorporada oferece:

Cabeçalho Mínimo

  • Nome do projeto
  • Nível C4 atual
  • Navegação breadcrumb
  • Badge Powered by Archyl

Interatividade Completa

  • Mover e ampliar o diagrama
  • Clique duplo para aprofundar
  • Navegar por todos os níveis C4
  • Visualizar detalhes dos elementos

Layout Responsivo

  • Adapta-se a qualquer tamanho de contêiner
  • Funciona em barras laterais estreitas
  • Escala em dispositivos móveis
  • Design limpo e sem distrações

Opções de Personalização

Tamanho

Ajuste largura e altura no código de incorporação:

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

Ou use porcentagens:

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

Visualização Inicial

Adicione parâmetros para controlar a visualização inicial:

?level=container    # Iniciar no nível Contêiner
?level=component    # Iniciar no nível Componente

Estilização

Adicione estilos personalizados ao contêiner:

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

Boas Práticas

Mantenha os Links Atualizados

  • Atualize os links de compartilhamento quando a arquitetura mudar
  • Defina datas de expiração razoáveis
  • Crie links separados para diferentes contextos

Otimize para os Visualizadores

  • Comece no nível C4 apropriado para seu público
  • Resumo executivo: Contexto do Sistema
  • Visão técnica: Contêiner
  • Detalhes de implementação: Componente

Documente a Incorporação

Adicione contexto ao redor do diagrama incorporado:

  • Breve descrição do que está sendo mostrado
  • Quando o diagrama foi atualizado pela última vez
  • Link para o projeto completo no Archyl para editores

Lide com Links Expirados

Se um link de compartilhamento expirar:

  1. Crie um novo link de compartilhamento
  2. Atualize o código de incorporação
  3. Informe os stakeholders se necessário

Solução de Problemas

Incorporação Não Carrega

  • Verifique se o link de compartilhamento não expirou
  • Verifique se a URL está correta
  • Verifique restrições de Content Security Policy
  • Tente em uma janela anônima

Problemas de Interatividade

  • Algumas plataformas restringem interações de iframe
  • PowerPoint tem suporte limitado durante apresentações
  • Verifique limitações específicas da plataforma

Problemas de Tamanho

  • Use unidades de viewport (vh, vw) para dimensionamento responsivo
  • Defina uma altura mínima (500px recomendado)
  • Teste em diferentes tamanhos de tela

Próximos Passos