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 "#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 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 :

  • 1  – utiliser des lignes fines.
  • 2  – utiliser des lignes épaisses.
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.
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.