Seeking Recommendations for a Visual Editor Interface for Mermaid #4626

TieWay59 · 2023-07-10T13:20:19Z

TieWay59
Jul 10, 2023

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!

Answered by aloisklink

Jul 23, 2023

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

View full answer

d48 · 2023-07-10T13:45:27Z

d48
Jul 10, 2023

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.

1 reply

jbriales Aug 31, 2024

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 · 2023-07-23T23:03:16Z

aloisklink
Jul 23, 2023
Maintainer

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

2 replies

TieWay59 Aug 1, 2023
Author

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

ted-marozzi Aug 3, 2023

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 · 2023-08-03T03:44:21Z

TieWay59
Aug 3, 2023
Author

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

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

2 replies

ted-marozzi Aug 6, 2023

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 Aug 7, 2023
Author

Thank you, I'll forward my details there.

Sriram-Kumar1 · 2023-09-28T11:05:37Z

Sriram-Kumar1
Sep 28, 2023

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

1 reply

TieWay59 Oct 3, 2023
Author

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

jgreywolf · 2023-12-18T22:13:46Z

jgreywolf
Dec 18, 2023
Collaborator

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.

1 reply

TieWay59 Sep 26, 2024
Author

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mermaid-js

Seeking Recommendations for a Visual Editor Interface for Mermaid #4626

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

mermaid-js

Seeking Recommendations for a Visual Editor Interface for Mermaid #4626

TieWay59 Jul 10, 2023

Replies: 5 comments · 7 replies

d48 Jul 10, 2023

jbriales Aug 31, 2024

aloisklink Jul 23, 2023 Maintainer

TieWay59 Aug 1, 2023 Author

ted-marozzi Aug 3, 2023

TieWay59 Aug 3, 2023 Author

ted-marozzi Aug 6, 2023

TieWay59 Aug 7, 2023 Author

Sriram-Kumar1 Sep 28, 2023

TieWay59 Oct 3, 2023 Author

jgreywolf Dec 18, 2023 Collaborator

TieWay59 Sep 26, 2024 Author

TieWay59
Jul 10, 2023

Replies: 5 comments 7 replies

d48
Jul 10, 2023

aloisklink
Jul 23, 2023
Maintainer

TieWay59 Aug 1, 2023
Author

TieWay59
Aug 3, 2023
Author

TieWay59 Aug 7, 2023
Author

Sriram-Kumar1
Sep 28, 2023

TieWay59 Oct 3, 2023
Author

jgreywolf
Dec 18, 2023
Collaborator

TieWay59 Sep 26, 2024
Author