Mode Embed

Vue d'ensemble#

Le mode Embed affiche un diagramme d'architecture, en lecture seule, directement dans une autre page web. L'intégration se fait avec un petit script JavaScript que vous copiez dans votre page.

Activer l'intégration#

1. Ouvrez votre projet.
2. Allez dans Paramètres du projet > Partage & Intégration.
3. Activez Autoriser l'intégration.
4. Copiez le snippet généré.

Section Partage & Intégration dans les paramètres du projet

Le snippet#

Collez le script dans votre page, puis initialisez l'embed sur un conteneur :

<script src="https://app.archi.siovos.com/embed.js"></script>
<div id="siovos-archi"></div>
<script>
  SiovosArchi('init', {
    projectId: 'votre-project-id',
    target: '#siovos-archi',
  });
</script>

Le script cherche l'élément désigné par target et y affiche le diagramme.

Deux modes#

• Mode projet : vous passez un projectId, le diagramme est chargé depuis Siovos Archi et reste à jour.
• Mode inline : vous passez directement les données du diagramme via data (JSON), sans appel réseau - utile pour un rendu figé ou hors ligne.

Options#

Exemple avec un thème sombre, ajusté à la vue :

<script src="https://app.archi.siovos.com/embed.js"></script>
<div id="siovos-archi"></div>
<script>
  SiovosArchi('init', {
    projectId: 'votre-project-id',
    target: '#siovos-archi',
    theme: 'dark',
    height: '800px',
    fit: true,
  });
</script>

Lecture seule#

L'embed est toujours en lecture seule :

• Les visiteurs peuvent naviguer (pan/zoom).
• Aucune modification, création de composant, commentaire ou export.
• Le diagramme porte un filigrane Siovos Archi.

Vue embed d'un diagramme en lecture seule

Sécurité#

• Vous contrôlez les domaines autorisés à afficher l'embed.
• Désactiver Autoriser l'intégration révoque immédiatement l'affichage sur les pages qui l'utilisaient.

Où l'intégrer#

Le snippet s'ajoute partout où vous pouvez insérer du HTML et du JavaScript : votre documentation, un portail interne, un wiki d'entreprise. Pour les plateformes qui n'acceptent qu'un bloc « embed » ou une iframe, utilisez leur propre fonctionnalité d'intégration.

Personnalisation visuelle#

Thème#

L'embed respecte l'option theme :

• light : force le thème clair.
• dark : force le thème sombre.
• auto : suit les préférences système du visiteur.

Ajuster à la vue#

Avec fit: true, le diagramme est automatiquement cadré pour être entièrement visible au chargement.

Zoom initial#

Contrôlez le niveau de zoom initial avec zoom (par exemple 0.8 pour 80 %).

Cas d'usage#

Documentation technique#

Intégrez vos architectures directement dans votre documentation pour que les développeurs aient toujours la référence à jour.

Onboarding#

Ajoutez les diagrammes dans vos documents d'onboarding pour aider les nouveaux arrivants à comprendre l'infrastructure.

Présentations#

Utilisez l'embed dans vos pages de présentation pour un rendu interactif (les spectateurs peuvent zoomer).

Wiki d'entreprise#

Centralisez vos architectures dans votre wiki avec des embeds, tout en maintenant une source unique de vérité dans Siovos Archi.

Prochaines étapes#

• Raccourcis clavier pour naviguer efficacement.