search

Mermaid-Chart / vscode-mermaid-preview

Previews Mermaid diagrams
MIT License
148 stars 16 forks source link

Arrowheads not showing in diagrams #2

Closed rexcfnghk closed 8 years ago

rexcfnghk commented 8 years ago

I copied the sample diagram from your README but the arrowheads are not showing. My environment:

capture

vstirbu commented 8 years ago

I have noticed this behaviour on one of my machines but not on the other. Needs further investigation to get a proper repeatable test env.

matthew-beck commented 8 years ago

I don't see the arrow heads either. This is what I'm using:

cilerler commented 8 years ago

On same machine, following code does not show the arrows in Visual Studio Code where code below renders it in browser fine.

```mermaid
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
`` `
<!doctype html>
<html>

<head>
    <title>Sample</title>
</head>

<body>
    <div class="mermaid">
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?
    </div>    
    <div class="mermaid" id="mermaidChart0">
        <svg>
            Chart should end up here
        </svg>
    </div>
    <script src="https://cdn.rawgit.com/knsv/mermaid/0.5.1/dist/mermaid.min.js"></script>
    <script>mermaid.initialize({startOnLoad:true});</script>
</body>

</html>
vstirbu commented 8 years ago

There is a conflict between mermaid stylesheet and vscode preview stylesheet. As a side note, running the extension in debug mode during development displays the arrow heads fine but not during normal use.