Thèmes personnalisés de diagrammes
Les thèmes personnalisés de diagrammes vous permettent de personnaliser l'apparence et le style visuel des diagrammes. Ces thèmes peuvent être exportés et partagés avec d'autres personnes.
Exemples de thèmes
Découvrez les possibilités des thèmes en essayant un thème prédéfini :
Thème | |
---|---|
Novus Light | Télécharger |
Dracula Dark | Télécharger |
Dracula Light | Télécharger |
Y2K Light | Télécharger |
Blueprint Dark | Télécharger |
Hudson Light | Télécharger |
Luna Light | Télécharger |
Dusk | Télécharger |
Neo | Télécharger |
Adapté aux daltoniens | Télécharger |
Fierté | Télécharger |
Classique (depuis 2012) | Download |
Format de fichier
Les fichiers de thème personnalisés sont importés et exportés au format JSON. Ils peuvent être modifiés avec n’importe quel éditeur de texte (comme Notepad sous Windows, TextEdit sous macOS, Visual Studio Code, Sublime Text, etc.).
Les fichiers doivent avoir l’extension .json
(ex. custom-flow-theme.json
).
Voici un exemple de fichier JSON de thème personnalisé :
{ "name": "Exemple", "canvasBackgroundColor": "#000000ff", "connectorLineColor": "#ff00ffff", "connectorLineThickness": 2, "shapeActionBackgroundColor": "#0000ffff", "shapeDecisionBackgroundColor": "#ffff00ff", "shapeDataBackgroundColor": "#00ff00ff", "shapeEndPointBackgroundColor": "#ff8800ff", "shapeBackstoryBackgroundColor": "#800080ff", "shapeCriticalBackgroundColor": "#ff0000ff" }
Types
Voici la liste des types de données pris en charge dans un fichier JSON de thème personnalisé :
Nom | Exemple | Description |
---|---|---|
string | "My Custom Theme" |
Chaîne de caractères entre guillemets. |
integer | 12345 |
Valeur numérique entière 0-9. |
color | "#ff00ffff" |
Les valeurs de couleur sont définies selon le modèle de couleurs RVB avec un canal alpha pour la transparence. Les couleurs sont écrites en notation hexadécimale sous la forme Si la valeur alpha est définie à Une valeur non spécifiée, une valeur |
Paramètres
Tous les paramètres d’un thème personnalisé de diagramme sont facultatifs, sauf s’ils sont indiqués comme obligatoires.
Base
Paramètre | Type | Description |
---|---|---|
name |
string | Obligatoire. Nom du thème personnalisé. |
Canevas
Paramètres du thème pour le canevas de chaque diagramme – la surface qui contient les formes et les connecteurs.
Paramètre | Type | Description |
---|---|---|
canvasBackgroundColor |
color | Couleur de fond du canevas. |
Connecteurs
Paramètres du thème pour les connecteurs/flèches de chaque diagramme.
Paramètre | Type | Description |
---|---|---|
connectorLineColor |
color | Couleur de ligne des connecteurs. |
connectorLineThickness |
integer | Épaisseur de ligne des connecteurs. Valeurs possibles :
|
connectorTextColor |
color | Couleur du texte des connecteurs. |
Formes - base
Paramètres du thème qui ne s’appliquent pas à un style de forme spécifique.
Paramètre | Type | Description |
---|---|---|
shapeHighlightColor |
color | Couleur utilisée lors de la navigation vers un diagramme pour mettre en surbrillance une forme précédemment sélectionnée. |
Formes - action
Paramètres du thème qui s’appliquent à toutes les formes de type Action.
Paramètre | Type | Description |
---|---|---|
shapeActionBackgroundColor |
color | Couleur de fond des formes. |
shapeActionBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapeActionBorderColor |
color | Couleur de la bordure des formes. |
shapeActionBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapeActionShadowColor |
color | Couleur de l’ombre portée des formes. L’ombre est petite par défaut, moyenne lorsque toute la forme est cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle), et grande lorsque le curseur est positionné sur une forme cliquable. |
shapeActionIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapeActionIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapeActionBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapeActionBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapeActionBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapeActionFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapeActionFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapeActionFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapeActionFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapeActionPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapeActionPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapeActionPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapeActionPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
Formes – décision
Paramètres du thème qui s’appliquent à toutes les formes de type Décision.
Paramètre | Type | Description |
---|---|---|
shapeDecisionBackgroundColor |
color | Couleur de fond des formes. |
shapeDecisionBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapeDecisionBorderColor |
color | Couleur de la bordure des formes. |
shapeDecisionBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapeDecisionShadowColor |
color | Couleur de l’ombre portée des formes. L’ombre est petite par défaut, moyenne lorsque toute la forme est cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle), et grande lorsque le curseur est positionné sur une forme cliquable. |
shapeDecisionIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapeDecisionIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapeDecisionBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapeDecisionBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapeDecisionBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapeDecisionFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapeDecisionFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapeDecisionFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapeDecisionFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapeDecisionPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapeDecisionPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapeDecisionPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapeDecisionPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
Formes – texte brut
Paramètres de thème s’appliquant à toutes les formes de texte brut.
Paramètre | Type | Description |
---|---|---|
shapePlainTextBackgroundColor |
color | Couleur de fond des formes. Remarque : Ce paramètre n’est actuellement pas utilisé, car les formes de type texte simple ont un fond transparent. |
shapePlainTextBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapePlainTextBorderColor |
color | Couleur de la bordure des formes. Remarque : Ce paramètre n’est actuellement pas utilisé, car les formes de type texte simple ont une bordure transparente. |
shapePlainTextBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapePlainTextShadowColor |
color | Couleur de l’ombre portée des formes. Les formes de type texte simple ont un fond transparent. L’ombre n’est visible que lorsque le curseur est positionné sur une forme cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle). |
shapePlainTextIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapePlainTextIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapePlainTextBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapePlainTextBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapePlainTextBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapePlainTextFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapePlainTextFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapePlainTextFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapePlainTextFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapePlainTextPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapePlainTextPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapePlainTextPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapePlainTextPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
Formes – données
Paramètres du thème qui s’appliquent à toutes les formes de type Données.
Paramètre | Type | Description |
---|---|---|
shapeDataBackgroundColor |
color | Couleur de fond des formes. |
shapeDataBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapeDataBorderColor |
color | Couleur de la bordure des formes. |
shapeDataBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapeDataShadowColor |
color | Couleur de l’ombre portée des formes. L’ombre est petite par défaut, moyenne lorsque toute la forme est cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle), et grande lorsque le curseur est positionné sur une forme cliquable. |
shapeDataIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapeDataIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapeDataBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapeDataBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapeDataBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapeDataFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapeDataFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapeDataFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapeDataFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapeDataPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapeDataPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapeDataPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapeDataPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
Formes – point final
Paramètres du thème qui s’appliquent à toutes les formes de type Point final.
Paramètre | Type | Description |
---|---|---|
shapeEndPointBackgroundColor |
color | Couleur de fond des formes. |
shapeEndPointBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapeEndPointBorderColor |
color | Couleur de la bordure des formes. |
shapeEndPointBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapeEndPointShadowColor |
color | Couleur de l’ombre portée des formes. L’ombre est petite par défaut, moyenne lorsque toute la forme est cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle), et grande lorsque le curseur est positionné sur une forme cliquable. |
shapeEndPointIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapeEndPointIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapeEndPointBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapeEndPointBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapeEndPointBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapeEndPointFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapeEndPointFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapeEndPointFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapeEndPointFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapeEndPointPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapeEndPointPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapeEndPointPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapeEndPointPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
Formes – contexte
Paramètres de thème s’appliquant à toutes les formes de contexte.
Paramètre | Type | Description |
---|---|---|
shapeBackstoryBackgroundColor |
color | Couleur de fond des formes. |
shapeBackstoryBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapeBackstoryBorderColor |
color | Couleur de la bordure des formes. |
shapeBackstoryBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapeBackstoryShadowColor |
color | Couleur de l’ombre portée des formes. L’ombre est petite par défaut, moyenne lorsque toute la forme est cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle), et grande lorsque le curseur est positionné sur une forme cliquable. |
shapeBackstoryIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapeBackstoryIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapeBackstoryBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapeBackstoryBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapeBackstoryBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapeBackstoryFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapeBackstoryFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapeBackstoryFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapeBackstoryFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapeBackstoryPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapeBackstoryPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapeBackstoryPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapeBackstoryPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
Formes - critique
Paramètres du thème qui s’appliquent à toutes les formes de type Critique.
Paramètre | Type | Description |
---|---|---|
shapeCriticalBackgroundColor |
color | Couleur de fond des formes. |
shapeCriticalBackgroundHoverColor |
color | Couleur de fond des formes lorsque le curseur est positionné dessus. |
shapeCriticalBorderColor |
color | Couleur de la bordure des formes. |
shapeCriticalBorderHoverColor |
color | Couleur de la bordure des formes lorsque le curseur est positionné dessus. |
shapeCriticalShadowColor |
color | Couleur de l’ombre portée des formes. L’ombre est petite par défaut, moyenne lorsque toute la forme est cliquable (comme un lien vers un diagramme ou une fenêtre contextuelle), et grande lorsque le curseur est positionné sur une forme cliquable. |
shapeCriticalIconColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »). |
shapeCriticalIconHoverColor |
color | Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus. |
shapeCriticalBasicBodyTextColor |
color | Couleur du texte pour les formes de type « Texte » de base. |
shapeCriticalBasicBodyTextLinkColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base. |
shapeCriticalBasicBodyTextLinkHoverColor |
color | Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien. |
shapeCriticalFlowLinkNameColor |
color | Couleur du nom du diagramme pour les formes de type « Lien ». |
shapeCriticalFlowLinkNameHoverColor |
color | Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus. |
shapeCriticalFlowLinkNameUnderlineColor |
color | Flow name underline color for flow "Link" shapes. |
shapeCriticalFlowLinkNameUnderlineHoverColor |
color | Couleur du soulignement du nom du diagramme pour les formes de type « Lien ». |
shapeCriticalPopUpBodyTextColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle ». |
shapeCriticalPopUpBodyTextHoverColor |
color | Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |
shapeCriticalPopUpBodyTextUnderlineColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ». |
shapeCriticalPopUpBodyTextUnderlineHoverColor |
color | Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus. |