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

docs: If you use font-awesome in flowchart, you need to import css. #5195

Closed
arukiidou opened this issue Jan 14, 2024 · 0 comments · Fixed by #5196
Closed

docs: If you use font-awesome in flowchart, you need to import css. #5195

arukiidou opened this issue Jan 14, 2024 · 0 comments · Fixed by #5196
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect

Comments

@arukiidou
Copy link
Contributor

arukiidou commented Jan 14, 2024 •
edited

Description

If you use font-awesome in flowchart, you need to import css.
But currently it is not in the docs.

Steps to reproduce

  1. Open code sample in a browser

Screenshots

image

Code Sample

<html>
  <body>
    Here is one mermaid diagram:
    <pre class="mermaid">
        flowchart TD
            B["fa:fa-twitter for peace"]
            B-->C[fa:fa-ban forbidden]
            B-->D(fa:fa-spinner)
            B-->E(A fa:fa-camera-retro perhaps?)
    </pre>
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

Setup

  • Mermaid version:
  • Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

fix docs.

Additional Context

It works.

<html>
  <body>
    Here is one mermaid diagram:
    <pre class="mermaid">
      flowchart TD
        B["fab:fa-twitter for peace"]
        B-->C[fa:fa-ban forbidden]
        B-->D(fa:fa-spinner)
        B-->E(A fa:fa-camera-retro perhaps?)
    </pre>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />
    <script type="module">
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: true });
    </script>
  </body>
</html>

image

live editer already do this.

image
@arukiidou arukiidou added Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect labels Jan 14, 2024
arukiidou added a commit to arukiidou/mermaid that referenced this issue Jan 14, 2024
@arukiidou
Update flowchart.md mermaid-js#5195
3d018e9
@arukiidou arukiidou mentioned this issue Jan 14, 2024
Merged
4 tasks
arukiidou added a commit to arukiidou/mermaid that referenced this issue Jan 14, 2024
@arukiidou
Update flowchart.md mermaid-js#5195
d26c12c
sidharthv96 pushed a commit to arukiidou/mermaid that referenced this issue Jan 19, 2024
@arukiidou @sidharthv96
Update flowchart.md mermaid-js#5195
04ebf0d
sidharthv96 added a commit that referenced this issue Jan 19, 2024
@sidharthv96
Merge pull request #5196 from arukiidou/patch-1
51aea90 
Update flowchart.md - how to use font-awesome #5195
sidharthv96 added a commit that referenced this issue Jan 23, 2024
@sidharthv96
Merge branch 'master' of github.com:mermaid-js/mermaid into develop
17066aa 
* 'master' of github.com:mermaid-js/mermaid:
  docs: fix lint
  docs: move community to Discord
  Delete docs/syntax/gantt.html
  Add more detailed docs for Gantt tasks
  Update docs
  Update packages/mermaid/src/docs/syntax/flowchart.md
  Update flowchart.md #5195
sidharthv96 added a commit that referenced this issue Jan 23, 2024
@sidharthv96
Merge branch 'develop' into next
ba46747 
* develop: (35 commits)
  docs: fix lint
  docs: move community to Discord
  Swap condition blocks to avoid using negation
  Reposition const declaration to ideal place
  Change repetitive values into consts
  docs: fix swimm link
  Fix Update Browserslist
  Use pnpm/action-setup@v2
  Fix lint
  Delete docs/syntax/gantt.html
  Add more detailed docs for Gantt tasks
  Update docs
  Update packages/mermaid/src/docs/syntax/flowchart.md
  Update flowchart.md #5195
  Add tests for gitgraphs with unconnected branches
  Include logic for gitgraph with unconnected branches
  Include undefined on findClosestParent return types and update the function
  Remove unnecessary argument on findClosestParent call
  Use already defined const instead of method call
  Fix pnpm-lock by resetting it, sorry!
  ...
sidharthv96 added a commit to Yokozuna59/mermaid that referenced this issue Jan 23, 2024
@sidharthv96
Merge branch 'next' into pr/Yokozuna59/4751
5c46b98 
* next: (35 commits)
  docs: fix lint
  docs: move community to Discord
  Swap condition blocks to avoid using negation
  Reposition const declaration to ideal place
  Change repetitive values into consts
  docs: fix swimm link
  Fix Update Browserslist
  Use pnpm/action-setup@v2
  Fix lint
  Delete docs/syntax/gantt.html
  Add more detailed docs for Gantt tasks
  Update docs
  Update packages/mermaid/src/docs/syntax/flowchart.md
  Update flowchart.md mermaid-js#5195
  Add tests for gitgraphs with unconnected branches
  Include logic for gitgraph with unconnected branches
  Include undefined on findClosestParent return types and update the function
  Remove unnecessary argument on findClosestParent call
  Use already defined const instead of method call
  Fix pnpm-lock by resetting it, sorry!
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Triage Needs to be verified, categorized, etc Type: Bug / Error Something isn't working or is incorrect
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update flowchart.md - how to use font-awesome #5195 arukiidou/mermaid
2 participants
@sidharthv96 @arukiidou