Canevas

Un canevas est un élément Content avec un tableau shapes. Chaque entrée est une primitive de dessin unique (ligne, rectangle, cercle, chemin, texte, …) nommée selon son type de forme. La nomenclature et les propriétés reflètent les attributs de présentation SVG — les auteurs familiarisés avec SVG reconnaîtront cx/cy/r, x1/y1/x2/y2, d, fill, stroke.

Exemple en direct

Un vrai diagramme d'architecture réalisé comme un seul tableau shapes : un hexagone pour le service de périphérie, des rectangles arrondis pour le calcul, des cylindres ellipse-sur-rectangle pour les bases de données, des connecteurs codés par couleur. Ouvrez l'onglet Template pour voir le JSON.

Output

Try in Playground →

Template

Data

Conteneur

{
  "shapes": [ ... ],
  "viewBox": [720, 240],
  "padding": 0,
  "style": "defaultShapeStyle"
}

Propriété	Type	Par défaut	Description
shapes	array	—	Commandes de dessin (voir ci-dessous).
viewBox	[W, H]	auto à partir des commandes	Réservation explicite en points. Omettez pour dériver la boîte englobante serrée des commandes.
padding	number	0	Remplissage en points ajouté autour de la boîte englobante calculée automatiquement. Ignoré quand viewBox est défini.
style	string	—	Style par défaut appliqué aux commandes qui ne portent pas le leur.

Les coordonnées sont relatives à la boîte, origine en haut à gauche — x augmente vers la droite, y augmente vers le bas. Les commandes avec des coordonnées négatives sont décalées automatiquement dans la boîte quand viewBox est omis.

Formes intégrées

Chaque forme s'affiche de manière identique en PDF et DOCX — même JSON, même résultat.

Output

Try in Playground →

Template

Data

Niveau	Formes
Niveau 1 — primitives	rect, circle, ellipse, line, arc
Niveau 2 — polygones	triangle, diamond, pentagon, hexagon, octagon, plus, parallelogram, trapezoid
Niveau 3 — flèches directionnelles	rightArrow, leftArrow, upArrow, downArrow, chevron
Personnalisé	polygon — polygone fermé à N points, auto-fermé
Chemins	path — données SVG path arbitraires ; textPath — texte coulé le long d'un chemin
Contenu	text, image, barcode
Groupement	g — groupe les formes enfants sous une transformation + style en cascade ; use — instancie un composant graphique réutilisable

Chaque polygone et flèche s'adapte à la boîte englobante fournie via width × height ; le moteur de rendu dérive automatiquement les positions des sommets. Les commandes path / textPath acceptent les chaînes SVG d brutes, ce qui les rend les primitives les plus flexibles — tout ce que vous pouvez dessiner en SVG (courbes de Bézier, arcs, chemins composés, ornements décoratifs) se rend directement. Voir le tutoriel Galerie de motifs de canevas pour une référence complète des compositions décoratives (mandala, rayonnement, clé grecque, Lissajous, guilloché).

Commandes de dessin

Chaque commande est { "<nomForme>": { …props } } — une union discriminée nommée d'après la propriété de la forme. Chaque forme porte une référence style vers document.styles.

Primitives géométriques

Rectangle

{ "rect": { "x": 100, "y": 100, "width": 150, "height": 80, "rx": 6, "ry": 6, "style": "card" } }

rx / ry sont des rayons de coin optionnels — omettez-les pour des coins carrés.

Cercle

{ "circle": { "cx": 200, "cy": 100, "r": 30, "style": "node" } }

Ellipse

{ "ellipse": { "cx": 200, "cy": 100, "rx": 55, "ry": 6, "style": "dbCap" } }

Polygones Niveau 2

triangle, diamond, pentagon, hexagon, octagon, plus, parallelogram, trapezoid. Tous prennent x, y, width, height ; les sommets du polygone s'adaptent à cette boîte englobante.

{ "triangle":      { "x": 0,   "y": 0,   "width": 80, "height": 80, "style": "shape" } }
{ "diamond":       { "x": 110, "y": 0,   "width": 80, "height": 80, "style": "shape" } }
{ "pentagon":      { "x": 220, "y": 0,   "width": 80, "height": 80, "style": "shape" } }
{ "hexagon":       { "x": 330, "y": 0,   "width": 80, "height": 80, "style": "shape" } }
{ "octagon":       { "x": 0,   "y": 100, "width": 80, "height": 80, "style": "shape" } }
{ "plus":          { "x": 110, "y": 100, "width": 80, "height": 80, "style": "shape" } }
{ "parallelogram": { "x": 220, "y": 100, "width": 80, "height": 80, "style": "shape" } }
{ "trapezoid":     { "x": 330, "y": 100, "width": 80, "height": 80, "style": "shape" } }

Flèches Niveau 3

rightArrow, leftArrow, upArrow, downArrow, chevron. L'orientation est encodée dans le nom ; le moteur de rendu ajuste les mathématiques des sommets en conséquence.

{ "rightArrow": { "x": 0,   "y": 0, "width": 90, "height": 60 } }
{ "leftArrow":  { "x": 110, "y": 0, "width": 90, "height": 60 } }
{ "upArrow":    { "x": 220, "y": 0, "width": 60, "height": 90 } }
{ "downArrow":  { "x": 290, "y": 0, "width": 60, "height": 90 } }
{ "chevron":    { "x": 360, "y": 0, "width": 80, "height": 60 } }

Nœuds étiquetés (regrouper une forme + étiquette)

Un nœud de diagramme — une forme avec une étiquette centrée — est un groupe g : la forme plus un text centré dans la même boîte. Les enfants se dessinent dans les coordonnées locales du groupe, donc translate place le nœud et le style du groupe se propage en cascade aux enfants qui ne déclarent pas le leur (ici, la forme hérite du remplissage du nœud tandis que l'étiquette conserve son propre style de texte blanc).

{ "g": {
    "translate": [30, 85],
    "style": "node",
    "shapes": [
      { "hexagon": { "x": 0, "y": 0, "width": 110, "height": 50 } },
      { "text": { "x": 0, "y": 20.5, "width": 110, "text": "API Gateway", "style": "nodeLabel" } }
    ]
} }

Centrez l'étiquette verticalement avec y = height/2 − fontSize/2. Quand le même nœud réapparaît à travers un diagramme (le cas courant), définissez-le une fois comme un composant graphique et use le avec data par instance — voir order-lifecycle-states.json et org-chart.json.

Exemple en direct — architecture-diagram.json (un nœud de périphérie hexagone en tant que g, plus quatre composants arch-node instanciés via use).

Polygone

Polygone fermé défini par N points. Utile pour les étoiles, les badges, les formes de diagramme de flux personnalisées. Auto-fermé (dernier sommet revenant au premier).

{
  "polygon": {
    "points": [
      { "x": 100, "y": 10 },
      { "x": 140, "y": 40 },
      { "x": 125, "y": 90 },
      { "x": 75,  "y": 90 },
      { "x": 60,  "y": 40 }
    ],
    "style": "star"
  }
}

Lignes et arcs

Ligne

{ "line": { "x1": 50, "y1": 50, "x2": 200, "y2": 150, "style": "connector" } }

Arc

Balayage de startAngle à endAngle (degrés, CCW depuis +x) autour de (cx, cy).

{ "arc": { "cx": 200, "cy": 200, "r": 60, "startAngle": 0, "endAngle": 180, "style": "arc" } }

Chemins et texte sur chemin

Chemin

Données SVG path arbitraires via l'attribut d. Supporte les commandes SVG standard : M/m (moveto), L/l (lineto), H/h / V/v (horizontal/vertical lineto), C/c / S/s (courbe de Bézier cubique + lisse), Q/q / T/t (courbe de Bézier quadratique + lisse), A/a (arc elliptique), Z/z (fermer le chemin). Traits et/ou remplissages basés sur les propriétés de couleur fournies par le style (stroke → trait, fill → remplissage, les deux → remplissage+trait).

{ "path": { "d": "M 0 50 Q 100 0 200 50 T 400 50", "style": "wave" } }

Cercle complet comme deux arcs semi-circulaires :

{ "path": { "d": "M 100 6 A 94 94 0 0 1 100 194 A 94 94 0 0 1 100 6", "style": "outerRing" } }

textPath

Coule du texte le long d'un chemin avec rotation par glyphe. Le chemin lui-même n'est pas dessiné — appairez avec une commande path utilisant le même d si vous voulez une courbe visible aussi.

Propriété	Type	Description
d	string	Données SVG path (même syntaxe que path).
text	string	Texte à couler ; supporte les Codes courts ([b], [i], [color], [fontsize], [caps], [font, Family], …). Façonné au moment du rendu — les scripts complexes se joignent/empilent correctement (voir Texte multi-script et sceaux).
alignment	enum	start (par défaut) · middle · end — ancre le texte le long du chemin.
startOffset	number	Distance en points depuis le début du chemin avant le premier glyphe.
side	enum	above (par défaut) — ligne de base sur le chemin ; below — le glyphe pend sous le chemin.
style	string	Style de texte du canevas.

{
  "textPath": {
    "d": "M 24 100 A 76 76 0 0 1 176 100",
    "text": "OFFICIAL · [color, #7A1F2E]STATE CORPORATION COMMISSION[/color]",
    "alignment": "middle",
    "style": "sealTopText"
  }
}

Contenu

Texte

{ "text": { "x": 150, "y": 200, "text": "Section header", "style": "label" } }

Quand width est défini, (x, y) est le coin supérieur gauche d'une boîte de texte et le textAlign du style centre/aligne à droite le texte dans cette boîte. Sans width, l'ancre est le pivot d'alignement — l'alignement au centre pivote sur (x, y), l'alignement à droite se termine à cet endroit.

{ "text": { "x": 0, "y": 10, "width": 180, "text": "EDGE", "style": "laneHeader" } }

Définissez fontFamily sur le style de texte pour utiliser une police personnalisée intégrée, et changez de police au milieu de la chaîne avec le Code court [font, Family] — à la fois text et textPath sont façonnés au moment du rendu (voir Texte multi-script et sceaux).

Image

{ "image": { "x": 50, "y": 30, "width": 100, "height": 40, "href": "images/logos/acme.png" } }

Code-barres

Placez n'importe quelle symbologie de code-barres prise en charge aux coordonnées du canevas — PDF417, DataMatrix, QR, Code128, Code39, MaxiCode et les codes spécialisés 2D. L'encodeur de code-barres s'exécute au moment du rendu, donc la valeur codée peut être une référence $data.*.

{
  "barcode": {
    "x": 80, "y": 56,
    "width": 40, "height": 40,
    "spec": { "type": "datamatrix", "code": "$data.credential.payload" }
  }
}

Propriété	Type	Description
x, y	number	Coin supérieur gauche du code-barres dans les coordonnées du canevas.
width, height	number	Dimensions de rendu en points. Pour les codes 2D carrés, définissez les deux égaux. Omettez pour utiliser les valeurs par défaut par symbologie.
spec.type	string	Symbologie — datamatrix, qrcode, pdf417, code128, code39, aztec, maxicode, microqr, rmqr, micropdf417, dotcode, hanxin, code16k, codablockf, ultracode, gridmatrix, upnqr et tous les types linéaires 1D. Voir Symbologies.
spec.code	string	La charge utile à encoder. Supporte les références $data.* et $item.*.

Ceci est la primitive de code-barres du canevas — distincte du Code court [barcode, …] qui s'affiche en ligne avec le flux de texte. Utilisez la forme du canevas quand vous avez besoin du code-barres à un emplacement précis aux côtés d'autres formes du canevas (le centre d'un sceau, un coin d'un formulaire, une barre latérale de bord).

Exemples en direct — official-seal.json (enregistrement de vérification PDF417 à côté des numéros de contrôle), graduation-certificate.json et achievement-certificate.json (DataMatrix au centre visuel d'un sceau académique), stock-certificate.json (badge de vérification DataMatrix), void-check.json (filigrane Code128 monté sur bord).

Texte multi-script et sceaux

Canvas text et textPath sont façonnés avec HarfBuzz au moment du rendu — le même moteur qui façonne les paragraphes coulants. L'arabe et l'hébreu se joignent dans leurs formes contextuelles et s'affichent de droite à gauche, le Devanagari construit des conjonctifs, le thaï empile les marques de voyelle et de ton, et le chinois/japonais/coréen s'affichent à partir d'une famille CJK. Choisissez la police avec fontFamily sur le style de texte du canevas, et changez de polices par passage avec le Code court [font, Family]. Chaque anneau textPath peut donc porter un script différent — ce qui rend un sceau multi-script possible.

Exemples en direct — world-languages-proclamation.json (un sceau de canevas portant l'arabe, le latin, le grec et le Devanagari sur des anneaux textPath concentriques autour d'un caractère CJK) et multilingual-device-guide.json (anneaux extérieurs latin + CJK, anneaux intérieurs Devanagari + thaï autour d'un caractère CJK gras). Voir Polices personnalisées pour les détails de façonnage et de sous-ensemble.

Styles de canevas

Les formes du canevas utilisent un schéma de propriété différent des styles de paragraphe. Utilisez les clés ci-dessous — color/backgroundColor/border sont des propriétés de paragraphe et seront silencieusement ignorées sur les commandes de forme.

La nomenclature s'aligne avec les attributs de présentation SVG. Mêmes sémantiques que SVG, camelCase de style JSON.

Propriété	S'applique à	Description
fill	formes	Remplissage intérieur.
stroke	formes, lignes, chemins	Couleur de bordure / ligne / trait.
strokeWidth	formes, lignes, chemins	Largeur du trait en points.
strokeDasharray	formes, lignes, chemins	Motif de tiret en tant que tableau numérique : [on, off] pour tiret simple, [a, b, c, d, …] pour tiret-point, [0.5, 2.5] associé à strokeLinecap: "round" pour pointillé. Utilisez [0] ou [] pour réinitialiser explicitement à solide — l'état du canevas PDF est collant, donc un motif de tiret défini plus tôt dans le flux de commande persiste jusqu'à ce qu'il soit remplacé.
strokeDashoffset	chemins	Décalage de départ dans le motif de tiret (par défaut 0).
strokeLinecap	formes, lignes, chemins	butt (par défaut) / round / square — forme de terminaison de ligne. Combiné avec strokeDasharray, round transforme les minuscules segments activés en points ronds au lieu de carrés de pixels.
strokeLinejoin	chemins	miter (par défaut) / round / bevel — style de jointure d'angle aux sommets des polylignes.
strokeMiterlimit	chemins	Flottant positif — contrôle la longueur d'une pointe d'onglet avant d'être coupée à un biseau.
opacity	tous	0.0–1.0 transparence.
color	texte, textPath	Couleur de remplissage du texte.
fontSize	texte, textPath	Taille du texte en points.
fontWeight / fontStyle	texte, textPath	Poids (bold, normal, 100…900) et style (italic, normal).
fontFamily	texte, textPath	Famille de polices pour les polices personnalisées intégrées.
letterSpacing	texte, textPath	Suivi inter-caractères en points (positif élargit, négatif resserre).
textAlign	texte	left / center / right — le domaine est le width du texte quand défini, le point d'ancrage sinon.
textRenderingMode	texte, textPath	fill (par défaut) / stroke / fillstroke / invisible / fillclip / strokeclip / fillstrokeclip / clip.
skew	chemins	[skewX] ou [skewX, skewY] en degrés — applique une transformation d'inclinaison 2D.
transform	chemins	Matrice affine à 6 éléments [a, b, c, d, e, f] — ConcatMatrix brut.
rotate	formes	Rotation en degrés autour du centre de la forme.

{
  "styles": {
    "card":       { "fill": "#1E40AF", "stroke": "#1E3A8A", "strokeWidth": 0.5 },
    "cardLabel":  { "fontSize": 9, "fontWeight": "bold", "color": "#FFFFFF", "textAlign": "center" },
    "connector":  { "stroke": "#16A34A", "strokeWidth": 1.5 }
  }
}

Symboles et réutilisation — use

Dessinez un graphique une fois, instanciez-le plusieurs fois. Un composant graphique est un document dont le contenu est un seul canevas ; une commande use l'estampe dans un autre canevas dans une boîte de destination, le mise à l'échelle à partir du viewBox du composant et en liant les données par instance.

Déclaration d'un composant graphique

Un composant est un fichier de document ordinaire avec un handle metadata.name et une charge utile de canevas. Le name est ce que les auteurs référencent — il est indépendant du nom du fichier et du dossier.

{
  "component": {
    "metadata": { "name": "quality-seal" },
    "styles": {
      "sealOuter": { "stroke": "#10243E", "strokeWidth": 2 },
      "sealGrade": { "fontSize": 46, "fontWeight": "bold", "color": "#10243E", "textAlign": "center" }
    },
    "content": [
      {
        "viewBox": [150, 150],
        "shapes": [
          { "circle": { "cx": 75, "cy": 75, "r": 72, "style": "sealOuter" } },
          { "text": { "x": 0, "y": 45, "width": 150, "text": "$data.grade", "style": "sealGrade" } }
        ]
      }
    ]
  }
}

$data.grade est un placeholder rempli par instance (voir Liaison de données). Les styles nommés du composant le voyagent — ils se résolvent dans quel que soit le document qui le use.

Instanciation avec use

À l'intérieur de n'importe quel canevas, une commande use nomme le composant et donne une boîte de destination. width/height mettent à l'échelle le composant à partir de son viewBox ; data fournit les valeurs de cette instance.

{
  "viewBox": [472, 175],
  "shapes": [
    { "use": { "name": "quality-seal", "x": 16,  "y": 12, "width": 150, "height": 150, "data": { "grade": "A" } } },
    { "use": { "name": "quality-seal", "x": 206, "y": 27, "width": 120, "height": 120, "data": { "grade": "B" } } },
    { "use": { "name": "quality-seal", "x": 372, "y": 39, "width": 100, "height": 100, "data": { "grade": "A+" } } }
  ]
}

Une définition, trois tailles, trois notes — pas de géométrie dupliquée. Les anneaux, le texte et les formes imbriquées s'échellent en tant qu'unité.

Output

Try in Playground →

Template

Data

Champ use	Signification
name	Le metadata.name du composant (le handle que les auteurs écrivent).
id	Épingle GUID optionnelle ; gagne sur name quand les deux sont présents.
x / y	Coin supérieur gauche de destination, dans les coordonnées du canevas hôte.
width / height	Taille de destination ; l'échelle est dérivée par rapport au viewBox du composant.
data	Valeurs par instance liées aux placeholders $data.* du composant.
rotate / skew / transform	Transformations optionnelles appliquées à l'instance (degrés / degrés / matrice 6 éléments).
style	Style nommé en cascade vers les formes de l'instance qui ne déclarent rien.

Les transformations se composent dans l'ordre SVG (translate → rotate → skew → scale, puis la matrice transform brute). Les composants peuvent use d'autres composants ; l'imbrication est limitée en profondeur avec une garde de cycle.

Note DOCX. Dans la sortie Word, un use devient un groupe imbriqué portant translate, scale et rotate. Les transformations skew et raw-matrix ne sont pas exprimables sur un groupe Word et sont supprimées (le PDF les honore dans leur intégralité), et un groupe pivoté pivote sur son centre plutôt que sur son coin supérieur gauche.

Galerie de motifs — chemins, courbes et textPath

Un deuxième exemple en direct exerçant l'extrémité plus décoratively de l'API du canevas : données SVG path, courbes de Bézier quadratiques et cubiques, arcs, textPath (texte coulé le long d'une courbe), formes polygon et compositions se chevauchant. Utile comme référence lors de la création de sceaux, de bordures ornementales, d'illustrations mathématiques/géométriques ou de n'importe quoi où le langage de mise en page est « placer ces courbes exactement ici ».

Output

Try in Playground →

Template

Data

Prochaines étapes

• Filigranes — superpositions de texte/image translucides qui se répètent sur les pages.
• Tableaux — mises en page tabulaires qui coulent avec les paragraphes.
• Colonnes — mises en page de flux multi-colonnes.