Stackedit: UML flowchart diagrams do not render

Created on 12 Oct 2017  路  4Comments  路  Source: benweet/stackedit

When attempting to use flowchart.js markup in a markdown document in the editor, it doesn't render in the preview pane.

For instance:

st=>start: Problem
sub1=>subroutine: Resolve Problem
e=>end: Problem Resolved
op1=>operation: Escalate to Escalation Engineer
op2=>operation: Escalate to Management
cond1=>condition: Able to Resolve?
cond2=>condition: Able to Resolve?

st->op1->cond1
cond1(yes)->sub1->e
cond1(no)->op2
op2->cond2
cond2(yes)->sub1->e
cond2(no)->e

Just displays as text:

6d2d2b6a-4a3f-4a13-adce-90d22a0833ff

Most helpful comment

@benweet Would be great if this can be documented. I couldn't find any info related to this except looking into issues.

All 4 comments

You using = when you should be using - and vice-versa?

I tried this in v4 and it rendered your first sequence (remove the escape from the gravebacktick symbol leading the sequence)

\``` sequence
st->start: Problem
sub1->subroutine: Resolve Problem
e->end: Problem Resolved
op1->operation: Escalate to Escalation Engineer
op2->operation: Escalate to Management
cond1->condition: Able to Resolve?
cond2->condition: Able to Resolve?
\```

Rendered UML sequence

In the v5, you will have to use the mermaid syntax (```mermaid).

@benweet Would be great if this can be documented. I couldn't find any info related to this except looking into issues.

You can render UML diagrams using Mermaid. For example, this will produce a sequence diagram:

```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
long time, so long
that the text does
not fit on a row.

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

And this will produce a flow chart:

```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```

Was this page helpful?
0 / 5 - 0 ratings