Atelier

2026-03-28

Outil Diagram Studio

Editeur de schemas animes en single-file HTML, integre comme outil Tavern Tales avec export JSON, SVG, PNG, GIF et replay HTML.

VectorielSchemaToolsAnimation
Acceder a l outil interactif

Ce que fait l outil

Diagram Studio permet de construire des schemas visuels avec formes, connecteurs et animations de flux. L objectif est de produire rapidement un diagramme lisible, exportable et rejouable sans quitter le navigateur.

Quand l utiliser

  • Pour expliquer une architecture, un pipeline ou un systeme avec un rendu plus vivant qu un schema statique.
  • Pour preparer un support visuel exportable en SVG, PNG ou GIF selon le canal de partage.
  • Pour prototyper une carte de flux avant une version plus propre dans Figma, Excalidraw ou un support editorial.

Quand ne pas l utiliser

  • Quand il faut du travail collaboratif multi-utilisateur.
  • Quand le besoin principal est la mise en page texte longue ou la publication documentaire complete.
  • Quand il faut gerer plusieurs projets nommes avec historique avance dans le navigateur.

Tutoriel rapide

  1. Ouvrir /outils/diagram-studio.
  2. Choisir une forme ou un connecteur dans la barre d outils.
  3. Cliquer dans le canvas pour ajouter des blocs, puis les repositionner.
  4. Selectionner un element pour modifier son label, son style ou son animation via l inspector.
  5. Utiliser Fit, le zoom et le mode Presentation pour verifier la lisibilite.
  6. Exporter en JSON, SVG, PNG, GIF ou Replay HTML selon le besoin.

Workflow recommande (Tavern Tales)

Le bon usage actuel est de preparer une explication visuelle autonome, puis de l exporter en image, en GIF ou en replay pour un article Atelier, une fiche projet ou une demonstration technique. Pour un schema de travail rapide, le JSON local suffit; pour publication, preferer un export SVG, PNG ou GIF apres un dernier sanity pass visuel.

Fonctions cles

  • Ajout rapide de formes, sections et connecteurs.
  • Animations de flux par lien avec plusieurs modes visuels.
  • Inspector complet pour les proprietes du projet, des noeuds et des connecteurs.
  • Autosave local du dernier workspace dans le navigateur.
  • Exports JSON, SVG, PNG, GIF et Replay HTML.
  • Mode presentation pour capturer un schema sans chrome d edition.

Stack technique

  • Single-file HTML.
  • SVG + Vanilla JS + CSS custom properties.
  • localStorage pour l autosave du workspace courant.
  • Export navigateur via Blob, SVG serialize, rasterisation canvas pour PNG et encodage GIF avec gif.js.

Limites actuelles

  • MVP encore mono-workspace local: pas de liste de projets ni historique.
  • Export et confort mobile a revalider manuellement apres integration iframe.
  • Localisation partielle: l interface reste majoritairement en anglais.

Evolutions envisagees

  • Vrai mode mobile avec inspector encore plus compact.
  • Gestion de projets nommes ou snapshots recents.
  • Templates de diagrammes de depart.
  • Raccourcis/undo-redo plus visibles.
  • Passe de traduction FR et polish visuel Tavern Tales.

Acces rapide

  • Outil interactif: /outils/diagram-studio
  • Runtime source integre: apps/web/public/tools/diagram-studio-mvp.html
  • Brouillon source nettoye apres integration; le runtime canonique reste apps/web/public/tools/diagram-studio-mvp.html