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

look forward to supporting the Mermaid in the near future. #227

Open
metapost opened this issue Apr 24, 2022 · 2 comments
Open

look forward to supporting the Mermaid in the near future. #227

metapost opened this issue Apr 24, 2022 · 2 comments

Comments

@metapost
Copy link

No description provided.

@adamzap
Copy link
Owner

adamzap commented Apr 24, 2022

Which Mermaid are you referring to? Thanks for you interest in the project!

@metapost
Copy link
Author

Mermaid is a diagram language used in markdown. https://mermaid-js.github.io/mermaid/#/

I mean that let landslide support it directly. We would have markdown, slide, math support, and diagram support, what a great thing.

In details, the mermaid codes can be written in the markdown files directly, and then landslide convert it into HTML files, so any browser can present the HTML files with diagrams easily.

Actually, I also figure out if the macro mechanism could be used to extend this functionality.

Basically, two steps are enough to achieve this goal.

First, add a mermaid.js code snippet into the <body> tag in final html file, see attached body-snippet.
Secondly, convert the mermaid code snippet in MD file into the corresponding HTML section. see attached mermaid-snippet.

-------body-snippet--------------

<body>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</body>

---------mermaid-snippet-----------------
This is an example code in MD file

---
# Mermaid diagram

!mermaid or ```mermaid (just an identifier)
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server01]
B --> D[Server02]

----- following the the corresponding code in final html file

<section>
    Here is a mermaid diagram:
    <div class="mermaid">
        graph TD 
        A[Client] --> B[Load Balancer] 
        B --> C[Server01] 
        B --> D[Server02]
    </div>
</section>

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

No branches or pull requests
2 participants
@adamzap @metapost