Comments (2)
Sure!
Hope the text below helps. Will add this to the wiki as well. Don't hesitate to add to that text if there are steps that could be better explained.
Things to be done for a new diagram type:
Step 1: Grammar & Parsing
Grammar
This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. This leads us to step 2.
Store data found during parsing
There are some jison specific sub steps here where the parser stores the data encountered when parsing the diagram, this data is later used by the renderer.
Step 2: Rendering
Write a renderer that given the data found during parsing renders the diagram. To look at an example look at sequendeRenderer.js rather then the flowchart renderer as this is a more generic example.
Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
Step 4: The final piece - triggering the renderinging
At this point when mermaid is trying to render the diagram it will detect it as being of the new type but there will be no match when trying to render the diagram. To fix this add a new case in the switch statement in main.js:init this should match the diagram type returned from step num 2. The code in this new case statement should call the renderer for the diagram type with the data found by the parser as an argument
from mermaid.
Its in the wikie. Closing this. Let me know if anything is unclear.
from mermaid.
Related Issues (20)
- Support plantuml sequence diagram syntax
- Mermaid doesn't have callback for syntax error
- Gantt: Create a hard border between section name and timeline
- erDiagram chinese HOT 1
- Let user see only on the interested terms
- using mermaid in vue3[svgElem.node(...).getBBox]
- Elk renderer not wokring on empty subgraph HOT 2
- Bump Typescript-Eslint version To V7 HOT 1
- block diagram column counting error HOT 1
- Overlapping Arrow Edges in Large Entity Relationship Diagrams HOT 1
- Typing a semicolon creates a new state node instead of being included in the transition text
- Unexpected rendering of message arrows in sequence diagrams
- The Relation height changed from v10.4.0 - v10.5.0 for class diagrams HOT 2
- Hash "#" symbol as prefix is not working for sequenceDiagram HOT 1
- Add positioning for elk layout renderer. This can enable Horizontal Order and Vertical Order
- Add `switch` as alias of `checkout` to gitGraph Syntax
- Block diagram group title should be rendered above of inner blocks HOT 1
- vdots hline array{c|c} (vertical lines) do not render HOT 2
- Add support for mermaidOptions in mermaid.render HOT 1
- click action for subgraphs
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mermaid.