Seeking Recommendations for a Visual Editor Interface for Mermaid

[TieWay59]

I am reaching out to inquire about the availability of a visual editing interface for creating and manipulating Mermaid diagrams interactively, similar in functionality to what is offered by Mermaid Live.

While I appreciate the functionality offered by Mermaid Live, I sometimes find myself wishing for a more interactive way to edit my diagrams within the graphic itself instead of searching through the code to locate the corresponding section to modify.

To clarify, I'm not looking for another UML drawing tool that merely exports images. What I seek is an editor that retains Mermaid's core concept of code-based diagram generation while enhancing user interaction during the editing process.

I understand this might be a tall order, but I'm curious to know if there's already such a project in existence or perhaps under development. Any suggestions or guidance would be greatly appreciated!

[d48]

I think one way for that interactivity and location in code is adding a click handler on the visual chart that corresponds to the line of code in the editor.

Similarly, if editing a piece of code for a graphic that exists in the visual, it can be highlighted in some way.

[jbriales]

I was exploring how to do sth like that.
Should this be doable in an automatic way and offered by the core Mermaid library itself? Not sure if a plugin would be a valid way here. I guess we'd need to track the source of visual objects before parsing happens...

[aloisklink]

I haven't seen any open-source projects that can do this. But there is a closed-source project called Mermaid Flow that does this https://www.mermaidflow.app/! Unfortunately it currently only supports Mermaid flowcharts, but they are planning on supporting other diagrams in the future! You can track their roadmap here: https://github.com/ted-marozzi/mermaid-flow-feedback

[TieWay59]

Thank you, this works very close to what I want! You saved my day ❤️

[ted-marozzi]

Hey I am the creator of Mermaid Flow! Thanks for the shout out @aloisklink and please feel free to send me any feedback you have to the link above. Cheers.

[TieWay59]

Hi @ted-marozzi I appreciate your product. I wonder where I can send my feedback. Here is what I found for now:

I was trying to copy code from my VSCode, but the editor tends to paste HTML. I wish to have some option to stop that, and I believe in most cases, if I'm building a mermaid diagram, I don't want HTML.

Why subgraph have a CSS color attribute by default? I wish to have a clean and no attribute by default.

---
title: "Diagram Title"
---
flowchart
	466218["init_pCIeDeviceProperty"] --> 160326["<span style=&quot;white-space-collapse: preserve; background-color: rgb(255, 255, 255);&quot;>initialize_table_pCIeDeviceDescriptionTable</span>"]
	172914["pcieDescriptionTable_reload"] --> 873181["<div style=&quot;color: rgb(235, 219, 178); background-color: rgb(29, 32, 33); font-family: &quot;Victor Mono Medium&quot;, &quot;Sarasa Term SC&quot;, Consolas, &quot;FiraCode Nerd Font Mono&quot;, &quot;Noto Sans Mono CJK SC&quot;, &quot;Droid Sans Mono&quot;, &quot;monospace&quot;, monospace; font-size: 18px; line-height: 24px; white-space: pre;&quot;><span style=&quot;color: #fabd2f;&quot;>pcieDescriptionTable_reload</span></div>"]
	878628["pcieDescriptionTable_reload_from_file"] --> 994368["<div style=&quot;color: rgb(235, 219, 178); background-color: rgb(29, 32, 33); font-family: &quot;Victor Mono Medium&quot;, &quot;Sarasa Term SC&quot;, Consolas, &quot;FiraCode Nerd Font Mono&quot;, &quot;Noto Sans Mono CJK SC&quot;, &quot;Droid Sans Mono&quot;, &quot;monospace&quot;, monospace; font-size: 18px; line-height: 24px; white-space: pre;&quot;><span style=&quot;color: #fabd2f;&quot;>pcieDescriptionTable_reload_from_file</span></div>"]
	subgraph 160326["<span style="white-space-collapse: preserve; background-color: rgb(255, 255, 255);">initialize_table_pCIeDeviceDescriptionTable</span>"]
		182956["netsnmp_create_handler_registration"]
		763948["netsnmp_table_helper_add_indexes"]
		171373["netsnmp_register_table_iterator"]
		593867["netsnmp_inject_handler_before"]
		172914
	end
	subgraph 873181["<div style="color: rgb(235, 219, 178); background-color: rgb(29, 32, 33); font-family: &quot;Victor Mono Medium&quot;, &quot;Sarasa Term SC&quot;, Consolas, &quot;FiraCode Nerd Font Mono&quot;, &quot;Noto Sans Mono CJK SC&quot;, &quot;Droid Sans Mono&quot;, &quot;monospace&quot;, monospace; font-size: 18px; line-height: 24px; white-space: pre;"><span style="color: #fabd2f;">pcieDescriptionTable_reload</span></div>"]
		683365["pCIeDeviceDescriptionTable_createEntry"]
		878628
	end
	subgraph 994368["<div style="color: rgb(235, 219, 178); background-color: rgb(29, 32, 33); font-family: &quot;Victor Mono Medium&quot;, &quot;Sarasa Term SC&quot;, Consolas, &quot;FiraCode Nerd Font Mono&quot;, &quot;Noto Sans Mono CJK SC&quot;, &quot;Droid Sans Mono&quot;, &quot;monospace&quot;, monospace; font-size: 18px; line-height: 24px; white-space: pre;"><span style="color: #fabd2f;">pcieDescriptionTable_reload_from_file</span></div>"]
		239661["fopen(&quot;/var/lib/smbios/pciedevice&quot;, &quot;r&quot;)"]
	end

%% Mermaid Flow Diagram Link
%% Keep this link to make future edits to your diagram
%% https://www.mermaidflow.app/flowchart#N4IgZgNg9g7iBcoB2UAmBTAzgg2qGAlqgC4AWCATAIwCsANCKegQOanEIAcADA0QiAAsANmHVOIBgAcomAsQJQkCUAA8ENQRQB0AZl0BOGgcFat3TgwCeCU9oo0A7J2GOD3J7to0Avg1QAhsQBKiAAxhABmJhYuAC6DJjEVhCx8DgJIJEARugQAgRI8gD6UgDCAJLoACLoAG4EYegACgBOUFLorcmSIKgErehhCkoCACoAQr2tAUgA1pjVMzDKiH4gUgGDSMQASrNzCLx9ywDKyakIxK0ArujryZ0Cg8OzLKkAcmjovUkpP2tEnkhsR0KgEGAAhAYtJZPJFEgAILZTBQCA3UGhdTwTQ6fRGExmCgWay2QT2JwuNweRxeGi+fwzFgsQosCFQmJ+fBEMi2YRUBhMVjsDTCQR8cHwEBUYTcXQUYS9GRyEarNS2bjk4S6HhUESORx6izCUnwYlUbR6kTCAyOMXyziO9aBYKhHJ5AQAHkwmyQAAI-qkALwAHRAMFI8nQAFofQEmtGwmjIlIYvA-VJBjFWnV0ABuP3ZeNzFjtG5IVCJtFQVrp1osbIACgc9D9LbobfpAEo82GAHyFeFQggAL3QxWC2VSpUqNXqjTnmDCrQIUlVYwCU-QnoA9HGkH3eigMNh0tLOBQjIqGHbDIIJAwqIbdLTesYda5ek-L3qQJlA2kGTSFs6A7Ps8xHAwMwQfAAogNBCxLAEKwqM6ZwXAC1x3A8VhPFKmA3NkpYBFI5BAqkwxguy0LoLCKoIsiqLopiiAgNigiato2q6vqhocS4prmpapiiLa9oUI6nBoQEzKstRMLwVgo5yfAkI0YkGGhIQJDkPAIhwUKbAcDiYo+Fy4Y8rpgiaIKzBGQgujahKAicLSVCcFQSpwqqWIIO4nCWpwNCcIIhi6DQsqGIJVAWo4NDuboIhaPyhpSf4QQhKx7r5FKnr9HUAYYaG4TVrWfr1k2FDhR21AGB2T6cD2hbFqWUDlpWSbQGVFXNnVfryh2+hNWASjENGkIALYEBAVjpgAZAAjjcUDEHmABqjTEDWfoALJKFAu1ggQNwTYty2rR2Z0rXmpxbFEAR+mMXQTX6pxlFdF1+mUShMVEl1LddABiAwBN9GB+h8XSoH6gOjbt+0fXm-3nXmXxba9syYPDKBfQAUgA0q970A59iNLFARAY0gWN7SgiPI9dE37XGTT036TMoCz+Z+iNOyxqO6Dpu5UiqAWECFDGhnsOmFCCCLBYRlGsabE06aZvm-ber6hX-MVnU1umADEkLZKgFBgL2IB9lIYQEIuy6ruum7ToM0ABKgu77n2u75YeDDHoBIDCJw+jCDQvSuS4El-hp-ynkBGwgWBByQfBKewVBByLMsarSTA5z-Fctz3AwjwAiABFETMpG-MClGSmpCmoEyLJIGyqkcrRGzeQxKJohiALqvA-mBcFoUGOFkV1SANhmjF2hxQlSUKk+7nrABWmWbYNmMHZIrwI5ujrFmylt-JJfcjpDkebZwrGcSxz8FKBgmI5D7d-RoysdiVCGAYeiuQoHFSOYg3DRVii-EKVVf7cAcNwRwzoMpuk3B6XK+UdbBjDPrbqDZmzVTbFQPqDUmpFjCCWMsFYqxdTrLgy8g0KCDV0MNUa40AhTRmvNEm61NrbVpgdHaR0Tps0RrdGYmAHpPVaC9N6bNvrUzRH9P0iNgYzDBugCGUMYZwz4cIrhaMDq3WptjA6ZQCZE10SjcmlNDE0wRlwhmq0OayBVugNmTiuYFl5mNOQY4hacHln6cWSBJZ72IDLOWos-SK1BMreMgsMyDEtt7fcGD0B61KkbE2ZsLb9htnbWoS4VxrgRBuLcxRXZQHdsUMA7QJrVOmtuPcvpvY7l9keb48cQBVQMKITy-4MLx0yJsbYex07HAQggOCCFs7IVzoyZCBdLjwCwiXEAZcBCV2IjXciIIqId3UicGSrd26Ny7sqeEShGL9xYkPX+L8AGOCAcFZwoDp6z2oBAgwUCvC6FgTQeB69NKsW0ryA+N9d530oNwbgx8lIjhUqc8yILdK-OnlLYyPBnJSncpeCKXlP5qjYpQRwpp7yINdFlFBOUQDBOIJgJAE0pDFGXOgII45SCzFQKkVo5T0AsiSDMHysdUiDOAiM8ChwM5p3mDMlCgJDn5yBSsnCeFFKvDbp8b4tcKKggbp3OiFykR92YoPIlekvBcR1NwPUrg+LGkEoIf+VpRJ2lChJJ08zZJn32QpYZoFiBfAwAIGUcoFQgCRVvA+0Lb72XgJikAT8QC3hMO-c5Plv6UDeZM8K5LMqgGygIWl9LGUTmduyvInQeXu1QMUQoGBVCxGFYBIZSdRkwSmVnJCcrgB50WZhYuKry4vGCBq9Agafhiv9eO4NkUw07PrufT1xzF0f0NVck1vlzW6EtTxW1RoBIzwco5YS1oxJus4AYMydBL6gqAQZUJXBH6SmlM+V8Br01Dyioes0Opc3INyNSotDKmWDH5aCHlk5pxRkFTWX4Az4iTuTu2zOMqu1zIVX2ou2FS64SHSCN4mqg2IYDVq7Fs7rwVzrrqldzcjkIv1au1U66B6btMNu7i1reL7pNN+8eJ6XXiQvVem9ukFSWAhbG+Nib3xUnxYazdsttBOAntCx0v8L0KlNPKf+PAX4Kn5FoIwFA-2UoA4W9AdLgO1qQAAKxBMUDlFZuXFFyCNQYcG44IcTuK9OHbUM51QvMxVhdlkDpw6q4dBGx1avndRn1XdaNepOQxtNvcmIsYzXpS89gnx0npEFX5cFZ40F+doIw1kekvijoIdYfqdjTrI6GxUEar5mmsjG-eUnn3fgML+d9CJN0yh01VKqrhHSuBigw3jQDtDQrm-N+bwgTP5qpQIPJ9silOzKRU92HmRVeemWhwL3n-USsmUFzDoXsNrNw88fDo7p3EYa9Kcj2rdl6oOYl5d8X+uXONRloeThyT6QcDa4KVApuzzEAFZ1NpXUOkvS10F+hxQSc60+gQwdQ7h1+4Sn+jguJVRfIIRw3BbQeSvIJTi4VbRWttIaMQxn0oUpW2ZqU5Qqi1AaE0ApDtilKFKdOFlbKACiOxWg2CbaKk7SHJV+cQgF+VtHgtLOVeFvD6r3jRaI5RnVezTlLvowc1Lf30s3LNQYBw2hdPiDFCVoK4nZ6CBlJaGKTggEcX0IlWrrbnuuS8B5cN16LKta8Dx9Fj6sUgBAdHXHrGdBEmJMYL5sCvCmjipa2gVrrUXscM75bWRVvs9thtx2JSy28rdjWmpUA6lgAaXt5txGztSsO4rntF2lVhZuxF+7WvHsy5I0GqU-v3KeVi-rhjX2je+p7qb65prsRGG4FxKg0K7fhQ4mIQSrkAH6EeWKayeonDCZD8j3+HWMUY6lN03pcmP1mv0LN21JgaAPzE6jqH26DSOTlIaQ0r+R8zOeahebO4AHQoEjYYYO4dQWwO44s2Qe4E02QigmAO462GA3O6AYYHYYYrQYYXYje0udWbacuKGCusyx2yul2auPeGuI6-eMWuu72NGLcM+Zyc+RqZui+kybq2g1k-ypOhgLgmgJK36TySmtIIkcosChCS2T2pGIAL8oUwc4amQYILAgEoA6yUoYQNwSQtevQE0WwcwXQ5wWwxkIAEBygDAxhrQphrQYuz6MghQHAfAOwXQ8YqoAA6pGsSE2qEAKlAKYb4a1lQOvG1K0E0AINaOIL8JEU0AABKcpLLSi9DBD1gWYzpNbpFbCaHEDJFOblwUC9CJoaExgU4RTWRRzGC9CzAEDGFxYG59BIKsQbxnhBGmHwCGzZBUC9HZCKhxDrxUaT40TmQ6HhD6FbQTRGEmFmEZGWHWGzH2FdBOFrYUw7ClEeEzDDAIihG3rHDtGgCdHoD7G6ThGJAJHlw9Z9YVxXGFFcrFG5GZGWGj6B6lx5EWYPGpHj4JrPrlHRgmBE48CGBzZ1FFCNGjFNytHHFAo4AVzXDBGCw9F9F9GDHDF64facjB4TF6EGEzG2FzGtDmHdACBLGEkrGOEVjrGuFbHgZeF7F+GHFAqwntAhGRoXF3E3BRHlwx7vyojclJEpFPEfEvECDKFvzPH5HfHXGlH-GoCaHRhaC0hCHUBgkMD1GQlYkJYwkIkhbwknHdH9Fol-gYksHxY+CZANDoAwAyCkmZbRhj5KaJQOC9amAlY2qmgxQWihTwJ6jH6GgUBAIMAjhQCGHwAr42j-LO5fISTxQ9KiBXp9AEAyQzATQCLBDVC6k147A7RBDgahAKDECpHVApnEQvRjDyCXDOgDAggDZSiTC9D9DDoEC5jS5JgTQTT+rtmRDRDNrrAECYAi6qB2nEDNCzB5AADynQqwKyDA7wUARYEAIuCp6AYwt2rEqANwUIK6QSa5G5dx4s4IDA5ReZlJ65qqLhmxDA2CAgKJ-RzW850AS546F5pqExkWD2TBt5UohsC23AvQpC5CbUFY30XUd5YAkFUFgFNYGArQYFsGv5-5MFrQcFYwkYZCwS0QGyaI-AfAiwUQTA2pZkQAA

Loading

flowchart
	466218["init_pCIeDeviceProperty"] --> 160326["initialize_table_pCIeDeviceDescriptionTable<br>"]
	172914["netsnmp_inject_handler_before"] --> 873181["<div>pcieDescriptionTable_reload<br></div>"]
	878628["pcieDescriptionTable_reload_from_file"] --> 994368["<div>pcieDescriptionTable_reload_from_file<br></div>"]
	subgraph 160326["initialize_table_pCIeDeviceDescriptionTable<br>"]
		182956["netsnmp_create_handler_registration"]
		763948["netsnmp_table_helper_add_indexes"]
		171373["netsnmp_register_table_iterator"]
		593867["netsnmp_inject_handler_before"]
		172914
	end
	subgraph 873181["<div>pcieDescriptionTable_reload<br></div>"]
		683365["pCIeDeviceDescriptionTable_createEntry"]
		878628
	end
	subgraph 994368["<div>pcieDescriptionTable_reload_from_file<br></div>"]
		239661["fopen(&quot;/var/lib/smbios/pciedevice&quot;, &quot;r&quot;)"]
	end

Loading

[ted-marozzi]

You can file feedback issues here.
If you want me to address these issues properly you will need to file the issues with a way to reproduce because I can't seem too.
I believe the editor shouldn't produce HTML labels, it might be to do with your environment (browser) or how you use the tool.

Subgraphs shouldn't have a css color by default. In the UI they will appear yellow as that is the default subgraph color for Mermaid diagrams but there should be no style label in the actual code.

As I said at the start, file an issue for each problem with detailed reproduction steps and I will be glad to help.
Thank you for your interest in Mermaid Flow! 🧜‍♀️

[TieWay59]

Thank you, I'll forward my details there.

[Sriram-Kumar1]

I am able to use VScode and markdown plugins and able to render locally
following plugins installed

• Markdown Preview Mermaid Support
• Markdown PDF

we need to enclose the mermaid syntax inside this markup

[TieWay59]

not what I seeking for. I want to modify the rendered diagram, and keep it sync with mermaid code.

[jgreywolf]

There is another "closed source" option, which is https://www.mermaidchart.com, developed by the same people who worked on mermaid.live as well as the original creator of mermaidJs.

[TieWay59]

Thank you for reply, it's been a long time after I asked, things are just work out nicely!

[saketkattu]

Hi @TieWay59 ,

I've been building an open-source version for this. This is a local first setup. No Accounts or data tracking. Would love it if your can give it try and share feedback on it .
https://github.com/saketkattu/mermaid-visual-editor