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 Clair Télécharger
Dracula Sombre Télécharger
Dracula Clair Télécharger
Y2K Clair Télécharger
Blueprint Sombre Télécharger
Hudson Clair Télécharger
Luna Clair Télécharger
Dusk Télécharger
Néo Télécharger
Adapté aux daltoniens Télécharger
Fierté Télécharger
Classique (depuis 2012) Télécharger

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 les paramètres d'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 "#RRGGBBAA" . R (red/rouge), G (green/vert), B (bleu/blue), et A (alpha) sont des caractères hexadécimaux (0-9, a-f ou A-F).

Si la valeur alpha est définie à ff , a couleur est opaque (sans transparence). Si elle est définie à 00 , la couleur est complètement transparente.

Une valeur non spécifiée, une valeur null , une chaîne vide ("" ), ou toute autre valeur invalide entraînera l’utilisation de la valeur du thème par défaut.

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 chaîne 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 couleur Couleur de fond du canevas.

Connecteurs

Paramètres du thème pour les connecteurs/flèches de chaque diagramme.

Paramètre Type Description
connectorLineColor couleur Couleur de ligne des connecteurs.
connectorLineThickness entier

Épaisseur de ligne des connecteurs.

Valeurs possibles :

  • 1  – utiliser des lignes fines.
  • 2  – utiliser des lignes épaisses.
connectorTextColor couleur Couleur du texte sur les connecteurs.

Formes - base

Paramètres du thème qui ne s’appliquent pas à une forme spécifique.

Paramètre Type Description
shapeHighlightColor couleur 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 couleur Couleur de fond des formes.
shapeActionBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapeActionBorderColor couleur Couleur de la bordure des formes.
shapeActionBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapeActionShadowColor couleur 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapeActionIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapeActionBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapeActionBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapeActionBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapeActionFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapeActionFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeActionFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapeActionFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeActionPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapeActionPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapeActionPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapeActionPopUpBodyTextUnderlineHoverColor couleur 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 couleur Couleur de fond des formes.
shapeDecisionBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapeDecisionBorderColor couleur Couleur de la bordure des formes.
shapeDecisionBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapeDecisionShadowColor couleur 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapeDecisionIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapeDecisionBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapeDecisionBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapeDecisionBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapeDecisionFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapeDecisionFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeDecisionFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapeDecisionFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeDecisionPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapeDecisionPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapeDecisionPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapeDecisionPopUpBodyTextUnderlineHoverColor couleur 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 type Texte libre.

Paramètre Type Description
shapePlainTextBackgroundColor couleur Couleur de fond des formes. Remarque : Ce paramètre n’est actuellement pas utilisé, car les formes de type texte libre ont un fond transparent.
shapePlainTextBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapePlainTextBorderColor couleur Couleur de la bordure des formes. Remarque : Ce paramètre n’est actuellement pas utilisé, car les formes de type texte libre ont une bordure transparente.
shapePlainTextBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapePlainTextShadowColor couleur Couleur de l’ombre portée des formes. Les formes de type texte libre 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapePlainTextIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapePlainTextBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapePlainTextBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapePlainTextBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapePlainTextFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapePlainTextFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapePlainTextFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapePlainTextFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapePlainTextPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapePlainTextPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapePlainTextPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapePlainTextPopUpBodyTextUnderlineHoverColor couleur 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 couleur Couleur de fond des formes.
shapeDataBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapeDataBorderColor couleur Couleur de la bordure des formes.
shapeDataBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapeDataShadowColor couleur 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapeDataIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapeDataBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapeDataBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapeDataBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapeDataFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapeDataFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeDataFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapeDataFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeDataPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapeDataPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapeDataPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapeDataPopUpBodyTextUnderlineHoverColor couleur 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 couleur Couleur de fond des formes.
shapeEndPointBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapeEndPointBorderColor couleur Couleur de la bordure des formes.
shapeEndPointBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapeEndPointShadowColor couleur 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapeEndPointIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapeEndPointBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapeEndPointBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapeEndPointBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapeEndPointFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapeEndPointFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeEndPointFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapeEndPointFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeEndPointPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapeEndPointPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapeEndPointPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapeEndPointPopUpBodyTextUnderlineHoverColor couleur 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 type Contexte.

Paramètre Type Description
shapeBackstoryBackgroundColor couleur Couleur de fond des formes.
shapeBackstoryBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapeBackstoryBorderColor couleur Couleur de la bordure des formes.
shapeBackstoryBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapeBackstoryShadowColor couleur 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapeBackstoryIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapeBackstoryBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapeBackstoryBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapeBackstoryBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapeBackstoryFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapeBackstoryFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeBackstoryFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapeBackstoryFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeBackstoryPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapeBackstoryPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapeBackstoryPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapeBackstoryPopUpBodyTextUnderlineHoverColor couleur 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 couleur Couleur de fond des formes.
shapeCriticalBackgroundHoverColor couleur Couleur de fond des formes lorsque le curseur est positionné dessus.
shapeCriticalBorderColor couleur Couleur de la bordure des formes.
shapeCriticalBorderHoverColor couleur Couleur de la bordure des formes lorsque le curseur est positionné dessus.
shapeCriticalShadowColor couleur 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 couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle »).
shapeCriticalIconHoverColor couleur Couleur des icônes pour les formes avec icônes (p. ex. : formes « Fenêtre contextuelle ») lorsque le curseur est positionné dessus.
shapeCriticalBasicBodyTextColor couleur Couleur du texte pour les formes de type « Texte » de base.
shapeCriticalBasicBodyTextLinkColor couleur Couleur du texte des liens pour les formes de type « Texte » de base.
shapeCriticalBasicBodyTextLinkHoverColor couleur Couleur du texte des liens pour les formes de type « Texte » de base lorsque le curseur est positionné sur le lien.
shapeCriticalFlowLinkNameColor couleur Couleur du nom du diagramme pour les formes de type « Lien ».
shapeCriticalFlowLinkNameHoverColor couleur Couleur du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeCriticalFlowLinkNameUnderlineColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien ».
shapeCriticalFlowLinkNameUnderlineHoverColor couleur Couleur du soulignement du nom du diagramme pour les formes de type « Lien » lorsque le curseur est positionné dessus.
shapeCriticalPopUpBodyTextColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle ».
shapeCriticalPopUpBodyTextHoverColor couleur Couleur du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
shapeCriticalPopUpBodyTextUnderlineColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle ».
shapeCriticalPopUpBodyTextUnderlineHoverColor couleur Couleur du soulignement du titre pour les formes de type « Fenêtre contextuelle » lorsque le curseur est positionné dessus.
Cette réponse a-t-elle répondu à votre question? Merci pour vos commentaires Un problème est survenu lors de l’envoi de vos commentaires. Veuillez réessayer plus tard.