🚀 Visual Paradigm a le plaisir d’annoncer que VPasCode – notre plateforme unifiée de diagrammes en code – prend désormais en charge quatre types supplémentaires de diagrammes Mermaid. Vous pouvez désormais créer les diagrammes professionnels suivants en utilisant une notation textuelle simple :
- 🐟 Diagramme Ishikawa (en forme de poisson / cause et effet) – L’analyse des causes racines devient facile
- ⚡ Diagramme de modélisation des événements – Concevez le flux d’information et les chronologies du système
- 🟡 Diagramme de Venn – Visualisez les relations entre ensembles et leurs intersections
- 🗺️ Cartes Wardley – Cartographie stratégique de la chaîne de valeur et analyse d’évolution
Que vous soyez gestionnaire de produit, architecte logiciel, développeur ou stratège, VPasCode vous aide à créer des diagrammes en utilisant la syntaxe que vous connaissez déjà, avecaperçu en temps réel, partage d’URL en un clic et exportation gratuite au format SVG/PNG.
🔍 Qu’est-ce qui distingue VPasCode ?
VPasCode (abrégé de Visual Paradigm’s asCode plateforme) est un environnement unifié texte-vers-diagramme. Il rend PlantUML, Mermaid, Graphviz, et bien plus (de nouveaux formats arrivent). Vous pouvez passer librement d’un syntaxe à un autre dans le même éditeur, sans avoir à apprendre plusieurs outils.
Cette amélioration se concentre sur la dernière syntaxe de Mermaid (v11.12.3+ et v11.15.0+). Vous trouverez ci-dessous des exemples de code fonctionnels pour chaque nouveau type de diagramme – copiez-les simplement et collez-les dans VPasCode.
📌 1. Diagramme Ishikawa (en forme de poisson) – Analyse des causes racines
Également connu sous le nom de diagramme cause-effet ou diagramme en forme de poisson. Idéal pour la gestion de la qualité et les séances de résolution de problèmes.
✅ Exemple – Analyse des causes racines de « Photo floue »
ishikawa-beta
Photo floue
Processus
Hors de focus
Vitesse d'obturation trop lente
Film protecteur non retiré
Filtrage de beauté appliqué
Utilisateur
Mains tremblantes
Équipement
OBJECTIF
Objectif inapproprié
Objectif endommagé
Objectif sale
CAPTEUR
Capteur endommagé
Capteur sale
Environnement
Sujet bougé trop vite
Trop sombre
💡 Notes sur la syntaxe : La première ligne définit le problème (la tête du poisson). L’indentation crée les branches hiérarchiques des causes (les arêtes du poisson).
📌 2. Diagramme de modélisation des événements – Comportement du système au fil du temps
La modélisation des événements décrit comment les informations évoluent au sein d’un système au fil du temps. Elle utilise des interfaces utilisateur, des commandes, des événements et des processeurs organisés en nappes. VPasCode prend en charge à la fois la syntaxe compacte et la syntaxe détendue, les données en ligne et les blocs de données externes.
✅ Exemple minimal – Flux d’ajout d’un article au panier
eventmodeling
tf 01 ui PanierUI
tf 02 cmd AjouterArticle
tf 03 evt ArticleAjouté
✅ Exemple de données en ligne
eventmodeling
tf 01 ui PanierUI
tf 02 cmd AjouterArticle { description : chaîne }
tf 03 evt ArticleAjouté { description : chaîne }
✅ Blocs de données et références multiples
eventmodeling
tf 01 ui PanierUI
tf 02 cmd AjouterArticle [[AjouterArticle01]]
tf 03 evt ArticleAjouté [[ArticleAjouté]]
tf 04 cmd AjouterArticle [[AjouterArticle02]]
tf 05 evt ArticleAjouté [[ArticleAjouté]]
donnees AjouterArticle01 {
description : 'john'
image : 'avatar_john'
prix : 20.4
}
donnees AjouterArticle02 {
description : 'jack'
image : 'avatar_jack'
prix : 12.5
}
donnees ArticleAjouté {
description : chaîne
image : chaîne
prix : nombre
}
✅ Réinitialiser le cadre
modélisation des événements
tf 01 ui CartUI
tf 02 cmd AddItem
tf 03 evt ItemAdded
rf 04 evt External.InventoryChanged
tf 05 pcr InventoryProcessor
tf 06 cmd ChangeInventory
tf 07 evt Cart.InventoryChanged
💡 Tokens clés : tf (intervalle de temps), rf (cadre de réinitialisation), ui / cmd / evt / pcr / rmo (types d’entités). Utilisez des espaces de noms comme Inventory.InventoryChanged pour créer des voies séparées.
📌 3. Diagramme de Venn – Relations et intersections d’ensembles
Montrez les relations logiques entre des ensembles en utilisant des cercles superposés. Prend en charge des tailles personnalisées, des étiquettes, des nœuds de texte et du style.
✅ Exemple basique – Superposition d’équipes
venn-beta
titre "Superposition des compétences d'équipe"
ensemble Frontend
ensemble Backend
union Frontend,Backend["Conception d'API"]
✅ Exemple de tailles, de nœuds de texte et de style
venn-beta
ensemble A["Équipe Frontend"]:20
texte A1["React"]
texte A2["Systèmes de design"]
ensemble B["Équipe Backend"]:12
texte B1["Développement d'API"]
union A,B["Compétences Full-stack"]:3
texte AB1["Spécification OpenAPI"]
style A remplissage:#ff6b6b
style A,B couleur:#2c3e50
style A1 couleur:#e74c3c
💡 Utilisez :nombre pour contrôler la taille du cercle, texte pour ajouter des étiquettes à l’intérieur des ensembles, et style pour des couleurs personnalisées.
📌 4. Cartes de Wardley – Cartographie stratégique de la chaîne de valeur
Les cartes de Wardley vous aident à visualiser les composants d’une entreprise ou d’un système, leur position dans la chaîne de valeur et leur stade d’évolution (Génése → Conçu sur mesure → Produit → Marchandise). VPasCode prend entièrement en charge la syntaxe officielle Mermaid pour les cartes de Wardley en utilisantwardley-beta comme type de diagramme.
✅ Exemple – Pipeline de développement logiciel
wardley-beta
titre Pipeline de déploiement logiciel
point "Besoins des utilisateurs" [0.95, 0.70]
composant "Déploiement manuel" [0.15, 0.25]
composant "Scripts CI/CD" [0.45, 0.50]
composant "Pipeline automatisé" [0.75, 0.65]
composant "Infrastructure cloud" [0.30, 0.40]
"Besoins des utilisateurs" -> "Pipeline automatisé"
"Pipeline automatisé" -> "Scripts CI/CD"
"Scripts CI/CD" -> "Déploiement manuel"
"Déploiement manuel" -> "Infrastructure cloud"
évoluer "Déploiement manuel" 0.20
évoluer "Scripts CI/CD" 0.55
évoluer "Pipeline automatisé" 0.85
évoluer "Infrastructure cloud" 0.70
note "L'adoption du cloud accélère la maturité du pipeline" [0.40, 0.35]
💡 Les noms de composants contenant des espaces doivent être entourés de guillemets doubles. Les coordonnées varient de 0 à 1 sur les deux axes (visibilité par rapport à l’évolution).
🛠️ Essayez VPasCode dès maintenant
Allez sur le VPasCode éditeur : https://www.vpascode.com/.
Sélectionnez le mode de syntaxe Mermaid, collez l’un des exemples de code ci-dessus, et observez votre diagramme se rendre instantanément.
Commencez gratuitement – Aucune carte de crédit requise, aucune installation. Tout ce dont vous avez besoin, c’est un navigateur.
📖 Documentation officielle et références
Visual Paradigm – Modélisation professionnelle, simplifiée.
VPasCode est la plateforme diagramme-en-code pour les équipes qui valorisent l’efficacité, la collaboration et la modélisation basée sur du texte.