Incorporare Diagrammi - Archyl Docs

Incorpora diagrammi interattivi di Archyl in Confluence, Notion, Miro e altre piattaforme

Incorporare Diagrammi

Incorpora diagrammi interattivi di Archyl nelle tue piattaforme di documentazione, wiki e strumenti di collaborazione.

Piattaforme Supportate

Archyl supporta l'incorporamento nei principali strumenti di collaborazione:

Piattaforma Metodo Interattività
Confluence Macro iframe Completa
Notion Comando /embed Completa
Miro App di incorporamento Completa
SharePoint Web part di incorporamento Completa
PowerPoint Add-in Web Viewer Limitata
Qualsiasi sito web Codice iframe Completa

Creare un Incorporamento

Passo 1: Creare un Link di Condivisione

  1. Apri il tuo progetto
  2. Clicca Condividi nella barra degli strumenti
  3. Clicca Crea Nuovo Link di Condivisione
  4. Configura le opzioni:
    • Nome (es. "Incorporamento Confluence")
    • Scadenza (opzionale)
  5. Copia il link generato

Passo 2: Ottenere il Codice di Incorporamento

  1. Nel dialogo di condivisione, clicca la scheda Incorpora
  2. Seleziona la piattaforma di destinazione
  3. Copia il codice fornito

Istruzioni per Piattaforma

Confluence

Usando la Macro Iframe:

  1. Modifica la tua pagina Confluence
  2. Inserisci la macro iframe o HTML
  3. Incolla il codice di incorporamento:
<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Usando Widget Connector:

  1. Inserisci la macro Widget Connector
  2. Incolla l'URL di condivisione direttamente
  3. Regola larghezza e altezza

Notion

  1. In una pagina Notion, digita /embed
  2. Seleziona Embed
  3. Incolla il tuo URL di condivisione
  4. Clicca Incorpora link
  5. Ridimensiona l'incorporamento secondo necessità

Miro

  1. Apri la tua board Miro
  2. Clicca l'icona App
  3. Cerca Embed o iFrame
  4. Aggiungi l'app alla board
  5. Incolla l'URL di condivisione
  6. Posiziona e ridimensiona

SharePoint

  1. Modifica la tua pagina SharePoint
  2. Aggiungi la web part Incorpora
  3. Incolla il codice di incorporamento
  4. Salva la pagina

PowerPoint

  1. Installa l'add-in Web Viewer
  2. Inserisci l'add-in in una slide
  3. Inserisci l'URL di condivisione
  4. Nota: Interattività limitata in modalità presentazione

Sito Web Generico

Aggiungi questo HTML a qualsiasi pagina web:

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

Funzionalità della Vista Incorporata

La vista incorporata fornisce:

Header Minimale

  • Nome del progetto
  • Livello C4 attuale
  • Navigazione breadcrumb
  • Badge Powered by Archyl

Interattività Completa

  • Pan e zoom del diagramma
  • Doppio clic per approfondire
  • Navigazione attraverso tutti i livelli C4
  • Visualizzazione dei dettagli degli elementi

Layout Responsivo

  • Si adatta a qualsiasi dimensione del contenitore
  • Funziona nelle barre laterali strette
  • Si scala sui dispositivi mobili
  • Design pulito e senza distrazioni

Opzioni di Personalizzazione

Dimensione

Regola larghezza e altezza nel codice di incorporamento:

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

O usa le percentuali:

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

Vista Iniziale

Aggiungi parametri per controllare la vista iniziale:

?level=container    # Inizia al livello Contenitore
?level=component    # Inizia al livello Componente

Stile

Aggiungi stili personalizzati al contenitore:

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

Best Practice

Mantieni i Link Aggiornati

  • Aggiorna i link di condivisione quando l'architettura cambia
  • Imposta date di scadenza ragionevoli
  • Crea link separati per contesti diversi

Ottimizza per i Visualizzatori

  • Inizia al livello C4 appropriato per il tuo pubblico
  • Riepilogo esecutivo: Contesto del Sistema
  • Panoramica tecnica: Contenitore
  • Dettagli implementativi: Componente

Documenta l'Incorporamento

Aggiungi contesto intorno al diagramma incorporato:

  • Breve descrizione di ciò che viene mostrato
  • Quando il diagramma è stato aggiornato l'ultima volta
  • Link al progetto Archyl completo per gli editor

Gestisci i Link Scaduti

Se un link di condivisione scade:

  1. Crea un nuovo link di condivisione
  2. Aggiorna il codice di incorporamento
  3. Informa gli stakeholder se necessario

Risoluzione dei Problemi

L'Incorporamento Non si Carica

  • Verifica che il link di condivisione non sia scaduto
  • Verifica che l'URL sia corretto
  • Controlla le restrizioni della Content Security Policy
  • Prova in una finestra in incognito

Problemi di Interattività

  • Alcune piattaforme limitano le interazioni iframe
  • PowerPoint ha supporto limitato durante le presentazioni
  • Controlla le limitazioni specifiche della piattaforma

Problemi di Dimensione

  • Usa unità viewport (vh, vw) per il dimensionamento responsivo
  • Imposta un'altezza minima (500px consigliato)
  • Testa su diverse dimensioni dello schermo

Prossimi Passi