Gabarits Edward (agent-ea v2)

Gabarits Edward (agent-ea v2)

Ce dossier contient deux familles de gabarits utilisés par Edward :

  1. Gabarits HTML de livrable (v2, actifs) — pages HLSD publiées sur JCT par /ea-livrable-assembler + /ea-publish-jct
  2. Gabarits Draw.io de diagrammes (legacy v1, conservés comme référence visuelle) — remplacés en v2 par /toolkit:diagram-generate qui produit du HTML interactif

Gabarits HTML de livrable (v2)

Templates canoniques pour la chaîne de publication. Edward lit le template, parse l'intrant DAE, remplit les sections, écrit dans out/.

Register choice — quelle famille de gabarits utiliser

Suite à l'audit Uma (R1 + R5), deux registres coexistent. Chaque DAE en choisit un en début de chaîne :

Register Fichiers Quand l'utiliser Aesthetic
register-board (canonique) template-*.html (sans suffixe) Choix par défaut. Dossiers déposés au CE/CA/VP — A100/A270/A290, sommaires de mandat, decision memos imprimables. Fraunces serif sur warm cream #F7F4EC, oversized italic numerals, § NN markers, SVG diagrammes inline
register-console (LITE) template-*-LITE.html Consoles opérationnelles, vigies récurrentes, dashboards à drill-down — pas pour un dépôt papier. Segoe UI sans sur cool #F9FAFB, stat-cards rapides à scanner, optimisé écran

Règle : dans le doute pour un DAE qui sera déposé, choisir register-board. Le board retient le document sur papier, pas le dashboard à l'écran.

Le choix du register se matérialise par la classe register-board ou register-console sur <body>. Les deux familles partagent la même palette STM (navy #002B5C, green #009A44, yellow #FFE400, blue #009EE0, teal #007489).

Liste des gabarits

# Fichier A-code Register Contenu Conditionnel
1 template-dae-index.html (hub) board Index DAE éditorial — cartes vers les pages + sparklines + catalogue Non
2 template-page1-solution.html A100 + A280 board Sommaire, principes, options, architecture SVG contextuelle, heat map, CMMI, prio actions, apps, intégrations, cas d'usage, validation Non
3 template-page2-feuille-de-route.html A270 board Contexte, Gantt SVG, blocs de phases, chemin critique SVG, matrice de risques SVG, jalons, décisions Non
4 template-page3-analyse-couts.html A290 board KPI rail, stacked bars CAPEX/OPEX SVG, courbe ROI SVG, structure budgétaire, radar A vs B SVG, bénéfices, warnings Oui — si chiffres présents dans l'intrant
5 template-dae-index-LITE.html (hub) console Variante dashboard avec stat-cards rapides Non
6 template-page1-solution-LITE.html A100 + A280 console Page 1 en register console Non
7 template-page2-feuille-de-route-LITE.html A270 console Page 2 en register console Non
8 template-page3-analyse-couts-LITE.html A290 console Page 3 en register console Oui
9 template-catalog-browser.html CAT (neutre) Explorateur catalogue Object + Relation. Accepte ?layer=&impact=&type= pour deep-link depuis heat map. Non

svg-components/ — bibliothèque de partials réutilisables (Uma R3)

Les huit diagrammes SVG du registre board sont extraits comme partials paramétrés dans svg-components/. Chaque fichier contient un bloc <!-- DATA CONTRACT --> listant les variables attendues. Edward inline le partial à la génération.

Partial Utilisé dans Diagramme
architecture-context.html page1 §06 Architecture contextuelle (n nodes en m zones, flux d'intégration)
impact-heatmap.html page1 §07 Heat map TOGAF × impact, intensités l0-l5
gantt.html page2 §02 Gantt 24 mois, 4 phases, jalons, dépendances
critical-path.html page2 §04 Chemin critique convergent (chains → convergence node → end)
risk-matrix.html page2 §05 Matrice 3×3 probabilité × impact
stacked-bar-chart.html page3 §03 Barres empilées CAPEX/OPEX1/OPEX23
roi-dual-line.html page3 §04 Courbes cumulatives investissement vs bénéfices + crossover
radar-compare.html page3 §06 Radar 6 axes option A vs B

Voir svg-components/README.md pour le détail du contrat de chaque partial.

Accessibilité WCAG AA — baseline appliquée (Uma audit §4)

Tous les templates v2 et LITE intègrent :

  • :focus-visible global (outline jaune)
  • Lien skip-to-main-content (focusable au tab)
  • byline à rgba(255,255,255,0.75) au lieu de 0.55 (contrast fix)
  • card-stats label en --ink-3 (#4B5563) au lieu de --ink-4
  • <svg role="img"> + <title> + <desc> sur tous les diagrammes
  • Décoratifs marqués aria-hidden="true"
  • Nodes interactifs (.arch-wrap .node) avec tabindex="0" + handlers focus/blur
  • Badges card-tba / tba avec aria-label
  • <html lang="fr-CA"> partout

R8 (CMMI fill tokens) : les cmmi-fill.l1/l2 utilisent maintenant des dégradés impact (#B91C1C → #D4A800 → #009A44) au lieu des rouges ad-hoc.

Source des templates

Copiés depuis departments/consulting/requests/REQ-CONS-008-agent-ea-v2-self-publishing/input/ :

  • template-page1-solution.html ← page1-solution-fals.html (DAE-0001 FALS)
  • template-page2-feuille-de-route.html ← page2-feuille-de-route-fals.html
  • template-page3-analyse-couts.html ← page3-analyse-couts-fals.html
  • template-dae-index.html ← page-ea-livrables-vigie.html

Palette canon

STM brand — navy #002B5C + green #009A44 + yellow #FFE400 + blue #009EE0 + teal #007489. Tokens définis en :root dans chaque template.

Alternates supportées par /ea-livrable-assembler --style {stm-brand|fluent|factory}. Voir la skill pour les tokens de chaque variante.

Convention de placeholders

Les templates contiennent du contenu FALS/DAE-0001 concret comme exemple canonique. Edward ne fait pas du remplacement de variables — il lit le template comme un exemple structurel et produit une nouvelle page mirror avec les données de la DAE en cours.

Champs typiquement à substituer pour chaque DAE :

Slot Source dans l'intrant
Header tag + title + subtitle + meta (auteur, direction, date) Frontmatter + section "Métadonnées"
Sommaire exécutif (objectif, organisation, processus, solution, applications, intégrations, données) Section "Sommaire exécutif"
Stats bar (compteurs) Calculés depuis out/{slug}-objects.csv
Apps grid Section "Applications" + Type d'impact
Intégrations table Section "Intégrations" + relations CSV
Process flow Section "Processus"
Use cases grid Section "Cas d'usage"
Validation badge Résultat de /ea:leanix-catalog-extract (validation mode)
Footer (sources, document, génération) Méta-données génération

Output Edward

Dans clients/{client}/DAE-NNNN-{slug}/out/ :

out/
├── index.html
├── page1-solution.html
├── page2-feuille-de-route.html
├── page3-analyse-couts.html        (conditionnel)
├── architecture.html                (depuis /toolkit:diagram-generate)
└── catalog/
    ├── {slug}-objects.csv
    ├── {slug}-relations.csv
    └── browser.html                 (depuis template-catalog-browser.html, à venir D3)

Puis /ea-publish-jct pousse cette arborescence vers bockbr/jct-portail-{client}/livrables/DAE-NNNN-{slug}/.

Gabarits Draw.io (legacy v1, référence)

Ce dossier contient des gabarits Draw.io réutilisables pour les diagrammes d'architecture STM.

Gabarits disponibles

# Fichier Type Output Mise à jour
1 drawio-integration-card.drawio Intégration des données (Card style) 01-integration.drawio 2026-02-15
2 drawio-er-model.drawio Modèle de données conceptuel (ER) 02-modele-donnees.drawio 2026-02-15
3 drawio-bpmn-process.drawio Processus d'affaires (BPMN 2.0) 03-processus-affaires.drawio 2026-02-15
4 drawio-architecture-applicative.drawio Architecture applicative (TOGAF) 04-architecture-applicative.drawio 2026-02-15
5 drawio-business-context.drawio Contexte d'affaires (TOGAF) 05-contexte-affaires.drawio 2026-02-15
6 drawio-roadmap-swimlane.drawio Roadmap (Swimlane) 06-roadmap-swimlane.drawio 2026-02-15
7 drawio-roadmap-timeline.drawio Roadmap (Timeline) 07-roadmap-timeline.drawio 2026-02-15
8 drawio-interaction-application.drawio Interaction Application (NEW) Vigie-Tech-L3-interaction-*.drawio 2026-02-17

1. Diagramme d'intégration (drawio-integration-card.drawio)

Usage: Vue métier des flux de données entre systèmes

Caractéristiques:

  • 4 Zones (bandes verticales): SOURCES, MAESTRO, MICROSOFT FABRIC, VISUALISATION
  • Workspaces (cadres pointillés): Applications LeanIX
  • Cards (cadres épais avec stripe 5px): IT Components LeanIX
  • Data pills (capsules arrondies): Data Objects LeanIX
  • Flèches fluides avec labels sémantiques (fournit, alimente, publie)
  • Légende complète (Nouveau, Existant, Modifié, Data Object, IT Component, Workspace)
  • Palette STM (Cyan #009EE0, Jaune #FFE400, Gris-bleu #D2E5E6)

Alignement LeanIX:

  • Zone → regroupement visuel
  • Workspace → Application
  • Card → IT Component
  • Data pill → Data Object

2. Modèle ER (drawio-er-model.drawio)

Usage: Modèle de données conceptuel avec entités et relations

Caractéristiques:

  • Entités rectangulaires avec attributs (PK, FK)
  • Relations avec cardinalités (1:1, 1:N, N:M)
  • Verbes de relation
  • Palette STM pour impact (nouveau/modifié/existant)

3. Processus BPMN (drawio-bpmn-process.drawio)

Usage: Processus d'affaires niveau 3 (swimlanes par persona)

Caractéristiques:

  • Swimlanes = personas/utilisateurs SEULEMENT
  • Conteneurs pointillés = Applications/IT Components
  • Événements (start/end), tâches, flux séquentiels
  • Alignement LeanIX sur chaque conteneur

4. Architecture applicative (drawio-architecture-applicative.drawio)

Usage: Vue applicative (diagramme 6 TOGAF)

Caractéristiques:

  • Applications, IT Components, relations
  • Couches technologiques
  • Interfaces et protocoles

5. Contexte d'affaires (drawio-business-context.drawio)

Usage: Vue contexte d'affaires (TOGAF)

Caractéristiques:

  • Acteurs externes
  • Systèmes externes
  • Frontières du système
  • Relations d'affaires

6-7. Roadmaps (drawio-roadmap-*.drawio)

Usage: Roadmap projet (swimlane ou timeline)

Caractéristiques:

  • Swimlane: Par équipe/domaine
  • Timeline: Chronologique avec jalons
  • Phases du projet
  • Livrables clés

8. Interaction Application (drawio-interaction-application.drawio) ⭐ NEW

Usage: Vue détaillée application avec hiérarchie fonctionnelle et interactions personas

Caractéristiques:

  • 3 Zones (gauche → centre → droite): PERSONAS, APPLICATIONS, DONNÉES
  • Personas (rectangles arrondis bleus): Acteurs métier
  • Application (business card avec stripe): Container principal
  • Fonctions applicatives (rectangles arrondis): Fonctionnalités métier
  • Sous-fonctions (petits rectangles gris): Détails optionnels
  • Data objects (capsules): Sources/destinations de données
  • Relations pointillées: Persona → Fonction (utilise, consulte)
  • Relations pleines: Données ⇄ Application (alimente, produit)
  • Palette STM (Bleu #0066cc, Jaune #ffe400, Vert #5a9b6a, Gris #999999)
  • Légende complète avec types d'impact et types de relations

Alignement ArchiMate 3.2:

  • Application Component = Business Card
  • Application Function = Rectangle arrondi ✅ (standard ArchiMate!)
  • Application Interface = Connexions
  • Business Actor = Personas

Alignement LeanIX:

  • Application Fact Sheet → Business Card
  • Capability métier → Fonctions (relation "realizes")
  • User Persona → Actors

Inspiré de: Diagramme Contexte Loi 25 (concept personas-processus-systèmes)

Créé pour: REQ-030 (walk_20260216_1808)

Génération automatique (recommandé)

Script: tools/generate_drawio.py

# Générer tous les 7 diagrammes (recommandé)
python tools/generate_drawio.py --slug banc-essai --all

# Ou générer un seul type
python tools/generate_drawio.py --slug banc-essai --type integration
python tools/generate_drawio.py --slug banc-essai --type er-model
python tools/generate_drawio.py --slug banc-essai --type bpmn-process
# ... etc.

Ce que fait le script:

  1. Charge le template approprié depuis .claude/commands/templates/
  2. Parse le frontmatter de content-in/intake-{slug}.md
  3. Remplace les métadonnées (titre, date, version)
  4. Sauvegarde dans content-out/diagrams-{slug}/NN-nom.drawio

Avantage:

  • ✅ Métadonnées correctes automatiquement
  • ✅ Nommage standardisé (01-07)
  • ✅ Structure de base validée STM
  • ✅ Prêt pour édition manuelle dans VSCode

Édition manuelle

  1. Ouvrir dans VSCode

    • Installer l'extension Draw.io (si pas déjà fait)
    • Ouvrir le fichier généré: content-out/diagrams-{slug}/NN-nom.drawio
    • L'éditeur Draw.io s'ouvre automatiquement

  2. Adapter au projet

    • Renommer les éléments selon l'intake
    • Ajouter/supprimer des cards/nodes selon les besoins
    • Ajuster les données pills
    • Mettre à jour les flèches et labels
    • Appliquer les couleurs STM (nouveau/modifié/existant)

  3. Sauvegarder

    • Ctrl+S dans VSCode
    • Fichier .drawio versionné dans la demande

Intégration Confluence (legacy v1 — adaptateur optionnel, désactivé par défaut)

v4 (TFD-0029) : la sortie par défaut est le jeu de pages Macroscope (rendu HTML via publish.mjs). Confluence n'est plus la cible par défaut — c'est un adaptateur de rendu optionnel (modèle render(data, format)), activé seulement si présent dans manifest.formats. La procédure ci-dessous ne s'applique que si l'adaptateur Confluence est explicitement activé.

Les fichiers .drawio s'intègrent nativement dans Confluence:

  1. Téléverser le fichier dans la page Confluence
  2. Le plugin Draw.io for Confluence le rend automatiquement
  3. Éditable directement dans Confluence

Ajouter un nouveau gabarit

Pour ajouter un nouveau gabarit dans ce dossier:

  1. Créer le diagramme dans Draw.io
  2. Valider qu'il respecte la palette STM
  3. Ajouter une légende complète
  4. Sauvegarder ici avec un nom descriptif: drawio-{type}-{style}.drawio
  5. Documenter dans ce README
  6. Référencer dans .claude/commands/ea-commun-diagramme.md

Références