Mermaid support #649

stevenjoezhang · 2019-03-04T05:20:36Z

+# Mermaid tag
+mermaid:
+  enable: false
+  # Available themes: default | dark | forest | neutral
+  theme: forest
+  cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
+  #cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines.
Tests for the changes was maked (for bug fixes / features).
- Muse | Mist have been tested.
- Pisces | Gemini have been tested.
Docs in NexT website have been added / updated (for new features).

PR Type

What kind of change does this PR introduce?

What is the current behavior?

Issue resolved: #347

What is the new behavior?

Screenshots with this changes: N/A
Link to demo site with this changes: https://zhangshuqiao.org/2019-03/%E7%9C%9F%E6%AD%A3%E7%9A%84%E7%BA%A2%E9%BB%91%E6%A0%91/#more

How to use?

In NexT _config.yml:

...

Does this PR introduce a breaking change?

Yes.
No.

stevenjoezhang · 2019-03-04T05:24:00Z

Usage:

---
title: mermaid demo
categories:
date: 2019-03-04 12:33:12
tags:
---

{% mermaid graph TD %}
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssss<br/>ssssssssssssssssssssss<br/>sssssssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
{% endmermaid %}

{% mermaid graph LR %}
47(SAM.CommonFA.FMESummary)-->48(SAM.CommonFA.CommonFAFinanceBudget)
37(SAM.CommonFA.BudgetSubserviceLineVolume)-->48(SAM.CommonFA.CommonFAFinanceBudget)
35(SAM.CommonFA.PopulationFME)-->47(SAM.CommonFA.FMESummary)
41(SAM.CommonFA.MetricCost)-->47(SAM.CommonFA.FMESummary)
44(SAM.CommonFA.MetricOutliers)-->47(SAM.CommonFA.FMESummary)
46(SAM.CommonFA.MetricOpportunity)-->47(SAM.CommonFA.FMESummary)
40(SAM.CommonFA.OPVisits)-->47(SAM.CommonFA.FMESummary)
38(SAM.CommonFA.CommonFAFinanceRefund)-->47(SAM.CommonFA.FMESummary)
43(SAM.CommonFA.CommonFAFinancePicuDays)-->47(SAM.CommonFA.FMESummary)
42(SAM.CommonFA.CommonFAFinanceNurseryDays)-->47(SAM.CommonFA.FMESummary)
45(SAM.CommonFA.MetricPreOpportunity)-->46(SAM.CommonFA.MetricOpportunity)
35(SAM.CommonFA.PopulationFME)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->45(SAM.CommonFA.MetricPreOpportunity)
41(SAM.CommonFA.MetricCost)-->44(SAM.CommonFA.MetricOutliers)
39(SAM.CommonFA.ChargeDetails)-->43(SAM.CommonFA.CommonFAFinancePicuDays)
39(SAM.CommonFA.ChargeDetails)-->42(SAM.CommonFA.CommonFAFinanceNurseryDays)
39(SAM.CommonFA.ChargeDetails)-->41(SAM.CommonFA.MetricCost)
39(SAM.CommonFA.ChargeDetails)-->40(SAM.CommonFA.OPVisits)
35(SAM.CommonFA.PopulationFME)-->39(SAM.CommonFA.ChargeDetails)
36(SAM.CommonFA.PremetricCost)-->39(SAM.CommonFA.ChargeDetails)
{% endmermaid %}

{% mermaid graph TD %}
9e122290_1ec3_e711_8c5a_005056ad0002("fa:fa-creative-commons My System | Test Environment")
82072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 1")
db052290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Business Logic Server:Service 2")
4e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 1")
30122290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Shared Report Server:Service 2")
5e112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 1")
c1112290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs Dedicated Test Business Logic Server:Service 2")
b7042290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SupportDb]")
8f102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[DevelopmentDb]")
0e102290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[TestDb]")
07132290_1ec3_e711_8c5a_005056ad0002("fa:fa-circle [DBServer\SharedDbInstance].[SharedReportingDb]")
c7072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Business Logic Server")
ca122290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Shared Report Server")
68102290_1ec3_e711_8c5a_005056ad0002("fa:fa-server Dedicated Test Business Logic Server")
f4112290_1ec3_e711_8c5a_005056ad0002("fa:fa-database [DBServer\SharedDbInstance]")
d6072290_1ec3_e711_8c5a_005056ad0002("fa:fa-server DBServer")
71082290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:MSSQLSERVER")
c0102290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLAgent")
9a072290_1ec3_e711_8c5a_005056ad0002("fa:fa-cogs DBServer\:SQLBrowser")
1d0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost1")
200a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost2")
1c0a2290_1ec3_e711_8c5a_005056ad0002("fa:fa-server VmHost3")
9e122290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->db052290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->30122290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
9e122290_1ec3_e711_8c5a_005056ad0002-->c1112290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
82072290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
db052290_1ec3_e711_8c5a_005056ad0002-->c7072290_1ec3_e711_8c5a_005056ad0002
db052290_1ec3_e711_8c5a_005056ad0002-->82072290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->b7042290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->0e102290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->07132290_1ec3_e711_8c5a_005056ad0002
4e112290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
30122290_1ec3_e711_8c5a_005056ad0002-->ca122290_1ec3_e711_8c5a_005056ad0002
30122290_1ec3_e711_8c5a_005056ad0002-->4e112290_1ec3_e711_8c5a_005056ad0002
5e112290_1ec3_e711_8c5a_005056ad0002-->8f102290_1ec3_e711_8c5a_005056ad0002
5e112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
c1112290_1ec3_e711_8c5a_005056ad0002-->68102290_1ec3_e711_8c5a_005056ad0002
c1112290_1ec3_e711_8c5a_005056ad0002-->5e112290_1ec3_e711_8c5a_005056ad0002
b7042290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
8f102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
0e102290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
07132290_1ec3_e711_8c5a_005056ad0002-->f4112290_1ec3_e711_8c5a_005056ad0002
c7072290_1ec3_e711_8c5a_005056ad0002-->1d0a2290_1ec3_e711_8c5a_005056ad0002
ca122290_1ec3_e711_8c5a_005056ad0002-->200a2290_1ec3_e711_8c5a_005056ad0002
68102290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->c0102290_1ec3_e711_8c5a_005056ad0002
f4112290_1ec3_e711_8c5a_005056ad0002-->9a072290_1ec3_e711_8c5a_005056ad0002
d6072290_1ec3_e711_8c5a_005056ad0002-->1c0a2290_1ec3_e711_8c5a_005056ad0002
71082290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
c0102290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
c0102290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->d6072290_1ec3_e711_8c5a_005056ad0002
9a072290_1ec3_e711_8c5a_005056ad0002-->71082290_1ec3_e711_8c5a_005056ad0002
{% endmermaid %}

{% mermaid sequenceDiagram %}
participant Alice
participant Bob
participant John as John<br/>Second Line
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...
alt either this
Alice->>John: Yes
else or this
Alice->>John: No
else or this will happen
Alice->John: Maybe
end
par this happens in parallel
Alice -->> Bob: Parallel message 1
and
Alice -->> John: Parallel message 2
end
{% endmermaid %}

{% mermaid gantt %}
dateFormat  YYYY-MM-DD
axisFormat  %d/%m
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d

section Documentation
Describe gantt syntax               :active, a1, after des1, 3d
Add gantt diagram to demo page      :after a1  , 20h
Add another diagram to demo page    :doc1, after a1  , 48h

section Last section
Describe gantt syntax               :after doc1, 3d
Add gantt diagram to demo page      : 20h
Add another diagram to demo page    : 48h
{% endmermaid %}

{% mermaid gitGraph: %}
options
{
    "nodeSpacing": 150,
    "nodeRadius": 10
}
end
commit
branch newbranch
checkout newbranch
commit
commit
checkout master
commit
commit
merge newbranch
{% endmermaid %}

stevenjoezhang · 2019-03-04T10:07:45Z

exturl & scroll-cookie's code is just about 2 or 3 lines, it's not necessary to put them in a new file.

And because I didn't use the latest master branch, it is still boostrap.swig in the file. But don't worry, git merge will solve this.

1v9 · 2019-03-04T10:15:51Z

There is a huge js file, I've not tested mermaid successfully, but this feature so excited 🐸

stevenjoezhang · 2019-03-04T12:41:01Z

No more warnings from codacy-bot now... And I'll add the docs

ivan-nginx

No need to touch any other external libraries. If it's feature – add only feature.

layout/_layout.swig

jiangtj · 2019-03-05T05:57:24Z

If possible, add cdn support.
I use netlify deploy, but it has 100G bandwidth limit now. 😢
https://www.jsdelivr.com/package/npm/mermaid

In addition, should this be a separated third-party lib?

stevenjoezhang · 2019-03-05T06:35:41Z

Noticed that, I'll open an issue to discuss

maple3142 · 2019-03-05T08:14:12Z

I think mermaid itself should be be move to a external repo.

1v9 · 2019-03-05T10:58:59Z

There's a good product hexo-filter-mermaid-diagrams, work is less.

stevenjoezhang · 2019-03-05T11:20:43Z

Seems hexo-filter-mermaid-diagrams conflicts with NexT's highlight plugin

stevenjoezhang · 2019-03-05T11:57:17Z

Looks good, but I have done all the work in another way 😂

layout/_scripts/mermaid.swig

ivan-nginx · 2019-03-05T13:39:15Z

I think mermaid itself should be be move to a external repo.

Yes.

I use netlify deploy, but it has 100G bandwidth limit now.

And yes. NexT use Netlify autodeploy with 100G bandwidth limit too.

Also, i somewhere saw Mermaid library which was generated by Hexo node modules in backend, not real-time generated by script in frontend.

jiangtj · 2019-03-05T15:44:56Z

Also, i somewhere saw Mermaid library which was generated by Hexo node modules in backend, not real-time generated by script in frontend.

mermaid has two way to generate 😉

stevenjoezhang · 2019-03-06T09:21:40Z

Done

I have checked, it's ok now

1v9 · 2019-03-06T10:20:31Z

@stevenjoezhang @jiangtj @sli1989 @ivan-nginx I belive this PR is worth merging now.

jiangtj · 2019-03-06T10:51:23Z

$('body').find('pre.mermaid')
Will this way consume performance?
Maybe add enable choice for unneeded users.

1v9 · 2019-03-06T10:58:43Z

@jiangtj Yeah, another option, choose to find or not (load mermaid globally)?

stevenjoezhang · 2019-03-06T11:41:56Z

Added. Any other suggestions?

ivan-nginx

I think need to add vendors to external repo. User must can choose what he want to use: CDN or local files.

stevenjoezhang · 2019-03-06T14:44:37Z

I think need to add vendors to external repo. User must can choose what he want to use: CDN or local files.

What about mathjax and katex?

ivan-nginx · 2019-03-06T16:15:05Z

What about mathjax and katex?

Need too. To external repos, of course.

stevenjoezhang · 2019-03-07T06:30:04Z

@ivan-nginx I suppose to merge this PR first. Then solve the CDN url issue of mathjax, katex, pdf and mermaid in the future

_config.yml

lhyundeadsoul · 2019-05-14T16:35:43Z

@stevenjoezhang how can i make the background transparent

stevenjoezhang · 2019-05-14T16:55:47Z

@lhyundeadsoul I am not familiar with mermaid... maybe you can read the docs: https://mermaidjs.github.io/ or ask mermaid for help: https://github.com/knsv/mermaid/issues

mermaid · GitBook

GitHub
knsv/mermaid
Generation of diagram and flowchart from text in a similar manner as markdown - knsv/mermaid

mermaid

7a1bc3a

stevenjoezhang added the 🌟 New Feature label Mar 4, 2019

stevenjoezhang requested review from 1v9, ivan-nginx, jiangtj and sli1989 March 4, 2019 06:35

1v9 added the 💥 Breaking Change label Mar 4, 2019

theme-next deleted a comment Mar 4, 2019

stevenjoezhang mentioned this pull request Mar 4, 2019

Add Docs theme-next/theme-next.org#18

Merged

ivan-nginx previously requested changes Mar 4, 2019

View reviewed changes

layout/_layout.swig Outdated Show resolved Hide resolved

1v9 reviewed Mar 5, 2019

View reviewed changes

layout/_scripts/mermaid.swig Outdated Show resolved Hide resolved

stevenjoezhang requested review from ivan-nginx and removed request for ivan-nginx March 6, 2019 07:55

1v9 requested review from 1v9 and removed request for 1v9 March 6, 2019 11:02

update

54a1b5a

ivan-nginx requested changes Mar 6, 2019

View reviewed changes

Merge branch 'master' into mermaid

06c8780

ivan-nginx approved these changes Mar 7, 2019

View reviewed changes

_config.yml Outdated Show resolved Hide resolved

ivan-nginx changed the title ~~Fix #347: mermaid support~~ Added Mermaid support Mar 7, 2019

ivan-nginx added this to the v7.1.0 milestone Mar 7, 2019

Update _config.yml

511ecbd

stevenjoezhang merged commit 2d1474f into theme-next:master Mar 7, 2019

stevenjoezhang deleted the mermaid branch March 7, 2019 08:22

ivan-nginx removed the 💥 Breaking Change label Mar 7, 2019

ivan-nginx mentioned this pull request Mar 7, 2019

NexT v7.x Roadmap #67

Closed

72 tasks

stevenjoezhang added the 🎯 Roadmap label Mar 12, 2019

liolok changed the title ~~Added Mermaid support~~ Add Mermaid support Mar 31, 2019

liolok changed the title ~~Add Mermaid support~~ Mermaid support Mar 31, 2019

liolok changed the title ~~Mermaid support~~ Mermaid Mar 31, 2019

stevenjoezhang changed the title ~~Mermaid~~ Mermaid support Jul 30, 2019

tongluyang pushed a commit to tongluyang/hexo-theme-next that referenced this pull request Nov 19, 2019

Added Mermaid support (theme-next#649)

c0aa121

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Mermaid support #649

Mermaid support #649

stevenjoezhang commented Mar 4, 2019 •

edited

Loading

stevenjoezhang commented Mar 4, 2019

stevenjoezhang commented Mar 4, 2019

1v9 commented Mar 4, 2019

stevenjoezhang commented Mar 4, 2019

ivan-nginx left a comment

jiangtj commented Mar 5, 2019

stevenjoezhang commented Mar 5, 2019

maple3142 commented Mar 5, 2019

1v9 commented Mar 5, 2019

stevenjoezhang commented Mar 5, 2019

stevenjoezhang commented Mar 5, 2019

ivan-nginx commented Mar 5, 2019 •

edited

Loading

jiangtj commented Mar 5, 2019

stevenjoezhang commented Mar 6, 2019

1v9 commented Mar 6, 2019

jiangtj commented Mar 6, 2019

1v9 commented Mar 6, 2019

stevenjoezhang commented Mar 6, 2019

ivan-nginx left a comment

stevenjoezhang commented Mar 6, 2019

ivan-nginx commented Mar 6, 2019 •

edited

Loading

stevenjoezhang commented Mar 7, 2019

lhyundeadsoul commented May 14, 2019

stevenjoezhang commented May 14, 2019 •

edited by unfurl-links bot

Loading

Mermaid support #649

Mermaid support #649

Conversation

stevenjoezhang commented Mar 4, 2019 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

How to use?

Does this PR introduce a breaking change?

stevenjoezhang commented Mar 4, 2019

stevenjoezhang commented Mar 4, 2019

1v9 commented Mar 4, 2019

stevenjoezhang commented Mar 4, 2019

ivan-nginx left a comment

Choose a reason for hiding this comment

jiangtj commented Mar 5, 2019

stevenjoezhang commented Mar 5, 2019

maple3142 commented Mar 5, 2019

1v9 commented Mar 5, 2019

stevenjoezhang commented Mar 5, 2019

stevenjoezhang commented Mar 5, 2019

ivan-nginx commented Mar 5, 2019 • edited Loading

jiangtj commented Mar 5, 2019

stevenjoezhang commented Mar 6, 2019

1v9 commented Mar 6, 2019

jiangtj commented Mar 6, 2019

1v9 commented Mar 6, 2019

stevenjoezhang commented Mar 6, 2019

ivan-nginx left a comment

Choose a reason for hiding this comment

stevenjoezhang commented Mar 6, 2019

ivan-nginx commented Mar 6, 2019 • edited Loading

stevenjoezhang commented Mar 7, 2019

lhyundeadsoul commented May 14, 2019

stevenjoezhang commented May 14, 2019 • edited by unfurl-links bot Loading

stevenjoezhang commented Mar 4, 2019 •

edited

Loading

ivan-nginx commented Mar 5, 2019 •

edited

Loading

ivan-nginx commented Mar 6, 2019 •

edited

Loading

stevenjoezhang commented May 14, 2019 •

edited by unfurl-links bot

Loading