Faut-il créer votre propre Mermaid Chart ?
Diagrammes Mermaid hébergés avec édition visuelle et collaboration
Le cœur de Mermaid Chart pour un usage individuel est compact : créez un éditeur de diagrammes sous forme de code dans le navigateur, avec déplacement, redimensionnement, connexions, raccourcis clavier, sauvegarde automatique et export SVG ou PNG. Une personne compétente peut obtenir une version personnelle utile en une session, tandis que le produit payant se distingue surtout par la finition des interactions et la collaboration.
EN → FRAnalyse traduite automatiquement de l’anglais. Prompt original conservé en anglais.
Build a usable personal replacement for the core loop of Mermaid Chart.
Use exactly this stack: React + TypeScript + Vite + IndexedDB.
Primary job: Build a browser-based diagram-as-code editor with drag, resize, connect, keyboard shortcuts, autosave, and SVG or PNG export.
Start from an empty folder and create the complete working project.
Make the default mode single-user and private.
Store user data locally unless the core job requires the declared self-hosted database.
Do not add analytics, telemetry, ads, or third-party accounts.
Put every secret and external credential in .env and provide .env.example.
Use realistic sample data that is clearly labelled and easy to delete.
Implement the smallest polished interface that completes the core loop end to end.
Include clear empty, loading, validation, success, and failure states.
Add import and export so the user is not trapped in the app.
Use accessible keyboard navigation, labels, focus states, and sensible contrast.
Validate untrusted input and never log secrets or private file contents.
Deliberately exclude these paid-product advantages: high-fidelity import and export; presentation and enterprise controls; multiplayer cursors and comments.
Do not fake integrations, network effects, proprietary data, model quality, compliance, or security claims.
Where an external API is optional, keep the app useful without it and explain the degraded mode.
Write focused unit tests for the data model and the most important workflow.
Add one end-to-end smoke test that proves the core loop works.
Create a README with setup, permissions, architecture, data location, backup, and limitations.
Add scripts for install, development, test, build, and a production-style local run.
Run the tests and build before finishing, then fix errors rather than merely describing them.Le prompt s’ouvre prérempli dans votre agent. Relisez-le avant de l’exécuter. · ce prompt est généré à partir du plan de construction · améliorez-le via une PR
Comment créer votre propre version ?
Créez un éditeur de diagrammes sous forme de code dans le navigateur, avec déplacement, redimensionnement, connexions, raccourcis clavier, sauvegarde automatique et export SVG ou PNG.
Ce dont vous aurez besoin
- Node.js 22
- navigateur moderne
- aucun compte requis
Mermaid Chart : les formes sont faciles ; les clients paient pour une édition sans friction, des exports fiables, la collaboration et un canevas qui ne leur résiste jamais.
ximportation et exportation haute fidélité
xprésentation et contrôles d’entreprise
xcurseurs et commentaires multiutilisateurs
xvastes bibliothèques de modèles
Combien coûte Mermaid Chart ?
- Facturation mensuelle
- 10 $US/mois10 $US/mois · par personne
- Par an
- 120 $US/an120 $US/an
- Avec une carte brésilienne, IOF de 3,5% inclus
- 52,26 R$/mois627 R$/an
Enregistré dans Ma liste. Un avis s’affichera ici si le prix change.
Vous finalisez l’achat sur le site de Mermaid Chart. Vibe Radar ne gère aucun paiement.
| Offre | Mensuel | Annuel (par mois) | Ce qui est inclus |
|---|---|---|---|
| basic | $0/utilisateur | $0/utilisateur | Jusqu’à 3 diagrammes ; 1 équipe et 1 projet ; usage AI limité (plafond de crédits non chiffré publiquement) |
| plus | $10/utilisateur≈ 10 $US | $10/utilisateur≈ 10 $US | Diagrammes et taille des diagrammes illimités ; 300 crédits AI/an ; collaboration en consultation et commentaires |
| premium | - | $20/utilisateur≈ 20 $US | Diagrammes illimités ; 2,000 crédits AI/an ; places de consultation, équipes et projets illimités ; coédition et SSO |
| enterprise | custom | - | Fonctions Premium ; contrats sur mesure, assistance et contrôles d’entreprise ; plafonds chiffrés sur mesure |
Offre gratuiteJusqu’à 3 diagrammes hébergés ; 1 équipe et 1 projet ; usage AI limité (aucun plafond chiffré de crédits AI publié)
Conditions de facturationles offres payantes en libre-service sont annuelles uniquement ; aucune offre au mois
Coûts supplémentairesLes prix payants sont par utilisateur. Les crédits AI inclus se réinitialisent selon la périodicité de l’offre ; les tarifs Enterprise et les éventuels prix des crédits supplémentaires ne sont pas publiés.
verified 2026-10-20 · source ↗
Construire ou s’abonner à Mermaid Chart ?
Ajustez les chiffres : heures de développement, taux horaire, coûts d’exploitation et prix de l’abonnement.
Sur 24 mois, l’abonnement coûte moins cher.
Heures estimées d’après l’analyse (une session). Ne chiffre pas ce que vous perdez (support, intégrations, sécurité).
Puis-je recréer Mermaid Chart ?
Oui. Un bon agent de code IA (Claude Code, Codex, Cursor) peut créer en une session un remplaçant personnel utilisable de Mermaid Chart avec le prompt de cette page. Il tourne sur votre machine ou votre serveur, sans abonnement.
Combien coûte Mermaid Chart ?
Mermaid Chart coûte environ 10 $US/mois (Plus, vérifié le 20/10/2026), soit 120 $US par an. C’est ce que vous économisez en le remplaçant par un prompt.
Que perd-on en remplaçant Mermaid Chart ?
Honnêtement : importation et exportation haute fidélité; présentation et contrôles d’entreprise; curseurs et commentaires multiutilisateurs; vastes bibliothèques de modèles. Si l’un de ces points compte pour vous, continuez à payer.
Existe-t-il une alternative open source à Mermaid Chart ?
Oui : Mermaid (Moteur de rendu de texte en diagrammes avec une syntaxe couvrant de nombreux types de diagrammes.). Partir de l’existant, c’est aussi du vibecoding ; le prompt sert quand vous le voulez exactement à votre façon.