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

Introduce mermaid.js component #588

Open
TheItsNameless opened this issue Feb 5, 2023 · 2 comments · May be fixed by #910
Open

Introduce mermaid.js component #588

TheItsNameless opened this issue Feb 5, 2023 · 2 comments · May be fixed by #910
Assignees
@SmokeyStack
Labels
JS/VUE Issues pertaining to JS or VUE suggestion General suggestion, content or website.

Comments

@TheItsNameless
Copy link
Member

mermaid.js is a great way for building detailed diagrams and charts. A component in our wiki could help page creators for creating better and easy to understand content.
@TheItsNameless TheItsNameless added JS/VUE Issues pertaining to JS or VUE suggestion General suggestion, content or website. labels Feb 5, 2023
@TobidieTopfpflanze
Copy link

TobidieTopfpflanze commented Feb 5, 2023 •
edited
Loading

What is MermaidJS?

MermaidJS is a tool to create charts on text based input.
You can give it a try here on Github in markdown files or in the Mermaid.js live editor.

Examples

We are currently using images for flowcharts on the Animation Controllers page. Those could be replaced with generated charts using mermaid.js

This would also give other contributors to change/add graphs with the same style.

Old

old_graph_1

New - Example

stateDiagram-v2
    noAnimation: play no animaton
    flyAnimation: play fly animaton
    
    state Ground {
        noAnimation
    }

    state Air {
        flyAnimation
    } 

    direction LR
    Ground --> Air : Is in Air
    Air --> Ground: Is on ground
Loading

Old

old_graph_2

New - Example

stateDiagram-v2
    noAnimation: play no animaton
    flyAnimation: play fly animaton
    explodeAnimation: play explode animaton
    
    state Ground {
        noAnimation
    }

    state Air {
        flyAnimation
    } 

    state Explode {
        explodeAnimation
    }

    direction TB
    Ground --> Air : Is in Air
    Air --> Ground: Is on ground
    Ground --> Explode: Is dead
    Air --> Explode: Is dead
Loading

@SmokeyStack
Copy link
Member

It seems like we need to use a plugin in order to use mermaidjs in vitepress using markdown. If we integrate mermaidjs, we also need to remember to update the style guide so our graphs are uniform

@MedicalJewel105 MedicalJewel105 moved this to To Do in Bedrock Wiki Aug 9, 2024
@SmokeyStack SmokeyStack self-assigned this Sep 3, 2024
@SmokeyStack SmokeyStack linked a pull request Sep 3, 2024 that will close this issue
Draft
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@SmokeyStack SmokeyStack

Labels
JS/VUE Issues pertaining to JS or VUE suggestion General suggestion, content or website.
Projects
Bedrock Wiki
Status: To Do
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Mermaid Bedrock-OSS/bedrock-wiki
3 participants
@TobidieTopfpflanze @SmokeyStack @TheItsNameless