Intégration de Diagrammes - Archyl Docs

Intégrez des diagrammes Archyl interactifs dans Confluence, Notion, Miro et d'autres plateformes

Intégration de Diagrammes

Intégrez des diagrammes Archyl interactifs dans vos plateformes de documentation, wikis et outils de collaboration.

Plateformes Supportées

Archyl supporte l'intégration dans les outils de collaboration populaires :

Plateforme Méthode Interactivité
Confluence Macro Iframe Complète
Notion Commande /embed Complète
Miro App Embed Complète
SharePoint Web part Embed Complète
PowerPoint Add-in Web Viewer Limitée
Tout site web Code iframe Complète

Créer une Intégration

Étape 1 : Créer un Lien de Partage

  1. Ouvrez votre projet
  2. Cliquez sur Partager dans la barre d'outils
  3. Cliquez sur Créer un Nouveau Lien de Partage
  4. Configurez les options :
    • Nom (ex : "Intégration Confluence")
    • Expiration (optionnel)
  5. Copiez le lien généré

Étape 2 : Obtenir le Code d'Intégration

  1. Dans le dialogue de Partage, cliquez sur l'onglet Intégrer
  2. Sélectionnez votre plateforme cible
  3. Copiez le code fourni

Instructions par Plateforme

Confluence

Utiliser la Macro Iframe :

  1. Éditez votre page Confluence
  2. Insérez la macro iframe ou HTML
  3. Collez le code d'intégration :
<iframe
  src="https://app.archyl.com/embed/{shareToken}"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

Utiliser le Widget Connector :

  1. Insérez la macro Widget Connector
  2. Collez l'URL de partage directement
  3. Ajustez la largeur et la hauteur

Notion

  1. Sur une page Notion, tapez /embed
  2. Sélectionnez Embed
  3. Collez votre URL de partage
  4. Cliquez sur Embed link
  5. Redimensionnez l'intégration selon vos besoins

Miro

  1. Ouvrez votre board Miro
  2. Cliquez sur l'icône Apps
  3. Recherchez Embed ou iFrame
  4. Ajoutez l'app à votre board
  5. Collez l'URL de partage
  6. Positionnez et redimensionnez

SharePoint

  1. Éditez votre page SharePoint
  2. Ajoutez le web part Embed
  3. Collez le code d'intégration
  4. Sauvegardez la page

PowerPoint

  1. Installez l'add-in Web Viewer
  2. Insérez l'add-in sur une diapositive
  3. Entrez l'URL de partage
  4. Note : Interactivité limitée en mode présentation

Site Web Générique

Ajoutez ce HTML à n'importe quelle page web :

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

Fonctionnalités de la Vue Intégrée

La vue intégrée fournit :

En-tête Minimal

  • Nom du projet
  • Niveau C4 actuel
  • Navigation par fil d'Ariane
  • Badge Powered by Archyl

Interactivité Complète

  • Pan et zoom du diagramme
  • Double-clic pour zoomer
  • Navigation à travers tous les niveaux C4
  • Voir les détails des éléments

Layout Responsive

  • S'adapte à n'importe quelle taille de conteneur
  • Fonctionne dans les barres latérales étroites
  • S'adapte aux appareils mobiles
  • Design propre et sans distraction

Options de Personnalisation

Taille

Ajustez la largeur et la hauteur dans le code d'intégration :

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

Ou utilisez des pourcentages :

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

Vue Initiale

Ajoutez des paramètres pour contrôler la vue initiale :

?level=container    # Commencer au niveau Conteneur
?level=component    # Commencer au niveau Composant

Style

Ajoutez des styles personnalisés au conteneur :

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

Bonnes Pratiques

Gardez les Liens à Jour

  • Mettez à jour les liens de partage quand l'architecture change
  • Définissez des dates d'expiration raisonnables
  • Créez des liens séparés pour différents contextes

Optimisez pour les Lecteurs

  • Commencez au niveau C4 approprié pour votre audience
  • Résumé exécutif : Contexte Système
  • Vue d'ensemble technique : Conteneur
  • Détails d'implémentation : Composant

Documentez l'Intégration

Ajoutez du contexte autour de votre diagramme intégré :

  • Brève description de ce qui est montré
  • Quand le diagramme a été mis à jour pour la dernière fois
  • Lien vers le projet Archyl complet pour les éditeurs

Gérez les Liens Expirés

Si un lien de partage expire :

  1. Créez un nouveau lien de partage
  2. Mettez à jour le code d'intégration
  3. Informez les parties prenantes si nécessaire

Dépannage

L'Intégration Ne Charge Pas

  • Vérifiez que le lien de partage n'a pas expiré
  • Vérifiez que l'URL est correcte
  • Vérifiez les restrictions Content Security Policy
  • Essayez dans une fenêtre incognito

Problèmes d'Interactivité

  • Certaines plateformes restreignent les interactions iframe
  • PowerPoint a un support limité pendant les présentations
  • Vérifiez les limitations spécifiques à la plateforme

Problèmes de Taille

  • Utilisez des unités viewport (vh, vw) pour un dimensionnement responsive
  • Définissez une hauteur minimale (500px recommandé)
  • Testez sur différentes tailles d'écran

Prochaines Étapes