Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for Converting Mermaid to Excalidraw Elements #5035

Closed
EswaraSatya opened this issue Nov 14, 2023 · 2 comments
Closed

Support for Converting Mermaid to Excalidraw Elements #5035

EswaraSatya opened this issue Nov 14, 2023 · 2 comments
Labels
Type: Enhancement New feature or request

Comments

@EswaraSatya
Copy link

Proposal

I would like to propose the integration of a feature that allows the conversion of Mermaid diagrams to Excalidraw elements. This would enhance the versatility of Mermaid, enabling users to seamlessly transition between the two visualization tools. I believe this addition would benefit the user community by providing a smoother workflow between Mermaid and Excalidraw.

Excalidraw is already proficient in managing sequence diagrams and flow charts.

  • Enabling the conversion of Mermaid diagrams would provide users with a unified environment for their visualizations, enhancing the overall user experience.
    Reference--excalidraw/excalidraw@e8def8d

Use Cases

As a user who frequently creates visualizations and diagrams, I often find myself working on both Mermaid and Excalidraw for different types of diagrams. Currently, Excalidraw excels in handling sequence diagrams and flow charts, providing an intuitive and user-friendly environment. However, I encounter challenges when I want to seamlessly integrate Mermaid diagrams into my Excalidraw projects.

Main Feature that integration of mind maps will helps out using the main packages for the better visualization over the excalidraw tool

Screenshots

No response

Syntax

[
{
"type": "rectangle",
"version": 3,
"versionNonce": 1350234841,
"isDeleted": false,
"id": "tKZu1yx6hul-h2ByK6z2C",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 576,
"y": 203.60000610351562,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 150,
"height": 65,
"seed": 62578199,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [
{
"type": "text",
"id": "29FBGQGvt0X2AZocwxikq"
}
],
"updated": 1699945753270,
"link": null,
"locked": false
},
{
"type": "rectangle",
"version": 3,
"versionNonce": 1646866361,
"isDeleted": false,
"id": "5xWxy5kX3Oif_Y0jBAon5",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 576,
"y": 426.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 150,
"height": 65,
"seed": 1057293111,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [
{
"type": "text",
"id": "Kmby_DEqT9ZEG4wFN9SWv"
}
],
"updated": 1699945753270,
"link": null,
"locked": false
},
{
"type": "rectangle",
"version": 3,
"versionNonce": 549245081,
"isDeleted": false,
"id": "vC8Vct_XZmmzXqWxXReYV",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 810,
"y": 203.60000610351562,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 150,
"height": 65,
"seed": 336430167,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [
{
"type": "text",
"id": "LJc5ngQtFnzRG7VWa2YvB"
}
],
"updated": 1699945753270,
"link": null,
"locked": false
},
{
"type": "rectangle",
"version": 3,
"versionNonce": 300504441,
"isDeleted": false,
"id": "1YeycHlbqaQ6csYS3s5he",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 810,
"y": 426.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 150,
"height": 65,
"seed": 1923670391,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [
{
"type": "text",
"id": "KyQpAp0zv9PeM1hfi-VXe"
}
],
"updated": 1699945753270,
"link": null,
"locked": false
},
{
"type": "line",
"version": 3,
"versionNonce": 955399769,
"isDeleted": false,
"id": "fbzh8UgGFXehAjHPL7Bc-",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 651,
"y": 268.6000061035156,
"strokeColor": "#999",
"backgroundColor": "transparent",
"width": 0,
"height": 158,
"seed": 1545312919,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"startBinding": null,
"endBinding": null,
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": null,
"points": [
[
0,
0
],
[
0,
158
]
]
},
{
"type": "line",
"version": 3,
"versionNonce": 1688931129,
"isDeleted": false,
"id": "ONhwOXP4giv7EkjAtx52f",
"fillStyle": "solid",
"strokeWidth": 1,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 885,
"y": 268.6000061035156,
"strokeColor": "#999",
"backgroundColor": "transparent",
"width": 0,
"height": 158,
"seed": 890908599,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"startBinding": null,
"endBinding": null,
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": null,
"points": [
[
0,
0
],
[
0,
158
]
]
},
{
"type": "arrow",
"version": 3,
"versionNonce": 1031224345,
"isDeleted": false,
"id": "wEvDEB0r0TRC_6vi5pVP7",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 651.5,
"y": 304.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 234,
"height": 0,
"seed": 1472798935,
"groupIds": [],
"frameId": null,
"roundness": {
"type": 2
},
"boundElements": [
{
"type": "text",
"id": "OzbY3L6BMiOfx91_3hUSl"
}
],
"updated": 1699945753270,
"link": null,
"locked": false,
"startBinding": null,
"endBinding": null,
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": "arrow",
"points": [
[
0,
0
],
[
233,
0
]
]
},
{
"type": "arrow",
"version": 3,
"versionNonce": 323637497,
"isDeleted": false,
"id": "g01G8toAAQOLGv55AAsDw",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "dotted",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 884.5,
"y": 350.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 234,
"height": 0,
"seed": 1706880503,
"groupIds": [],
"frameId": null,
"roundness": {
"type": 2
},
"boundElements": [
{
"type": "text",
"id": "RrI_9-wQIhQAfHn_mw4ZJ"
}
],
"updated": 1699945753270,
"link": null,
"locked": false,
"startBinding": null,
"endBinding": null,
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": "arrow",
"points": [
[
0,
0
],
[
-233,
0
]
]
},
{
"type": "arrow",
"version": 3,
"versionNonce": 1806158297,
"isDeleted": false,
"id": "dKGXhvPtoCFdHAQTHqvRc",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 651.5,
"y": 396.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 234,
"height": 0,
"seed": 1509562135,
"groupIds": [],
"frameId": null,
"roundness": {
"type": 2
},
"boundElements": [
{
"type": "text",
"id": "DkFVFWpsMHG9V1ZMAw7QJ"
}
],
"updated": 1699945753270,
"link": null,
"locked": false,
"startBinding": null,
"endBinding": null,
"lastCommittedPoint": null,
"startArrowhead": null,
"endArrowhead": "arrow",
"points": [
[
0,
0
],
[
233,
0
]
]
},
{
"type": "text",
"version": 4,
"versionNonce": 1336092345,
"isDeleted": false,
"id": "29FBGQGvt0X2AZocwxikq",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 633.5040130615234,
"y": 226.10000610351562,
"strokeColor": "#000",
"backgroundColor": "transparent",
"width": 34.991973876953125,
"height": 20,
"seed": 1526012983,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "Alice",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "tKZu1yx6hul-h2ByK6z2C",
"originalText": "Alice",
"lineHeight": 1.25,
"baseline": 14
},
{
"type": "text",
"version": 4,
"versionNonce": 1507846041,
"isDeleted": false,
"id": "Kmby_DEqT9ZEG4wFN9SWv",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 633.5040130615234,
"y": 449.1000061035156,
"strokeColor": "#000",
"backgroundColor": "transparent",
"width": 34.991973876953125,
"height": 20,
"seed": 1284668759,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "Alice",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "5xWxy5kX3Oif_Y0jBAon5",
"originalText": "Alice",
"lineHeight": 1.25,
"baseline": 14
},
{
"type": "text",
"version": 4,
"versionNonce": 76647545,
"isDeleted": false,
"id": "LJc5ngQtFnzRG7VWa2YvB",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 867.8080062866211,
"y": 226.10000610351562,
"strokeColor": "#000",
"backgroundColor": "transparent",
"width": 34.38398742675781,
"height": 20,
"seed": 572963447,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "John",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "vC8Vct_XZmmzXqWxXReYV",
"originalText": "John",
"lineHeight": 1.25,
"baseline": 14
},
{
"type": "text",
"version": 4,
"versionNonce": 930846041,
"isDeleted": false,
"id": "KyQpAp0zv9PeM1hfi-VXe",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 867.8080062866211,
"y": 449.1000061035156,
"strokeColor": "#000",
"backgroundColor": "transparent",
"width": 34.38398742675781,
"height": 20,
"seed": 1886802839,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "John",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "1YeycHlbqaQ6csYS3s5he",
"originalText": "John",
"lineHeight": 1.25,
"baseline": 14
},
{
"type": "text",
"version": 4,
"versionNonce": 368149049,
"isDeleted": false,
"id": "OzbY3L6BMiOfx91_3hUSl",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 688.920036315918,
"y": 284.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 158.15992736816406,
"height": 40,
"seed": 1068878007,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "Hello John, how are \nyou?",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "wEvDEB0r0TRC_6vi5pVP7",
"originalText": "Hello John, how are you?",
"lineHeight": 1.25,
"baseline": 34
},
{
"type": "text",
"version": 4,
"versionNonce": 215405337,
"isDeleted": false,
"id": "RrI_9-wQIhQAfHn_mw4ZJ",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 741.6480178833008,
"y": 340.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 52.70396423339844,
"height": 20,
"seed": 495557079,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "Great!",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "g01G8toAAQOLGv55AAsDw",
"originalText": "Great!",
"lineHeight": 1.25,
"baseline": 14
},
{
"type": "text",
"version": 4,
"versionNonce": 547293177,
"isDeleted": false,
"id": "DkFVFWpsMHG9V1ZMAw7QJ",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 100,
"angle": 0,
"x": 711.5120239257812,
"y": 386.6000061035156,
"strokeColor": "#1e1e1e",
"backgroundColor": "transparent",
"width": 112.9759521484375,
"height": 20,
"seed": 1862682359,
"groupIds": [],
"frameId": null,
"roundness": null,
"boundElements": [],
"updated": 1699945753270,
"link": null,
"locked": false,
"fontSize": 16,
"fontFamily": 1,
"text": "See you later!",
"textAlign": "center",
"verticalAlign": "middle",
"containerId": "dKGXhvPtoCFdHAQTHqvRc",
"originalText": "See you later!",
"lineHeight": 1.25,
"baseline": 14
}
]

The way we need to be rendered on the excalidraw for the sequence
it is needed for the Mindmap Syntax

Implementation

This is a proposal which I'd love to see built into mermaid by the wonderful community.
@EswaraSatya EswaraSatya added Status: Triage Needs to be verified, categorized, etc Type: Enhancement New feature or request Type: New Diagram labels Nov 14, 2023
@sidharthv96
Copy link
Member

sidharthv96 commented Nov 14, 2023 •
edited
Loading

This is out of scope for MermaidJS project.

Please raise the issue with Excalidraw team in case you need more mermaid diagrams to be supported.
They already support a few diagrams, so the base framework required is already present.

We have worked with the Excalidraw team previously to make the conversion easier.

@sidharthv96 sidharthv96 closed this as not planned Won't fix, can't repro, duplicate, stale Nov 14, 2023
@sidharthv96 sidharthv96 removed Status: Triage Needs to be verified, categorized, etc Type: New Diagram labels Nov 14, 2023
@slavakurilyak
Copy link

Check out mermaid-to-excalidraw by @excalidraw

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Type: Enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@slavakurilyak @sidharthv96 @EswaraSatya