search

mjbvz / vscode-markdown-mermaid

Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
MIT License
633 stars 114 forks source link

There is no Icon in mindmap #209

Closed Shapeno closed 5 months ago

Shapeno commented 1 year ago 
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectivness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

the ::icon(fa fa-book) is not rendered, but leaves a blank.

mjbvz commented 7 months ago

Please share the source markdown of that diagram

ghost commented 7 months ago

Hi, This is an example of what is no t working for me : Code: ` '''mermaid

graph TD; A-->B[far:fa-window-maximize B]; A-->C; B-->D; C-->D;

''' ` Render:

  graph TD;
      A-->B[far:fa-window-maximize B];
      A-->C;
      B-->D;
      C-->D;

I hope this helps. Thanks

iainhallam commented 6 months ago

In the live Mermaid editor at mermaid.js.org, you can use FontAwesome 5 icons with the fa:fa-<icon-name> syntax. This doesn't work in the VS Code extension, and like the original poster, I came here to see if it was something that could be enabled.

mjbvz commented 6 months ago

Please post the text of a diagram with the problem

Vince1024 commented 6 months ago

Hi all,

If it helps, it's now working for me as I added this in my vscode config:

image

iainhallam commented 6 months ago

Please post the text of a diagram with the problem

graph LR
net[fa:fa-network-wired Network]

In the online editor, this gives:

Network with an icon

(Not quite sure why it's truncated...)

Sounds like from the workaround that @Vince1024 posted above, it would be enough to tell the extension to use FontAwesome's CSS.

codekitchen commented 6 months ago

The solution that @Vince1024 posted worked for me as well. Just so others don't have to copy from a screenshot, here's the vscode config JSON required:

"markdown.styles": [
  "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
]

Is it possible for this plugin to use this stylesheet by default?

mjbvz commented 5 months ago

Closing as it looks like adding the style sheet fixes this. This is documented in: https://github.com/mjbvz/vscode-markdown-mermaid?tab=readme-ov-file#using-custom-css-in-the-markdown-preview

If this keeps coming up we can consider always loading the FA stylesheet too