Upgrade Diagram version / Diagram upstream bugs

[abnerlee]

• render error on a high dpi screen on Windows (Text not aligned properly in v8.0 mermaid-js/mermaid#645)

• Links using Mermaid don't appear to work (Tooltip link in Flowchart docs not working mermaid-js/mermaid#682) (Link ("click" statement) in flowchart does not work in exported SVG mermaid-js/mermaid#646)

• render issue when text is too long (opt/alt/loop with long describing text mermaid-js/mermaid#710)

• ERROR: [Flowchart] e.shiftX is not a function (js error symbol.shiftX is not a function adrai/flowchart.js#125)

• Text after <br> dropped in mermaid diagrams. seems fixed in 8.4.5

• Mermaid linkStyle Not Working Correctly

• Sequence Diagram Title Isn't Centered Sequence Diagram Title Isn't Centered mermaid-js/mermaid#3927

[jpcartailler]

Just in case you had missed my delayed response to #3249 (merged above), here was the code used to generate the "overly small font" in win10 (Typora 0.9.86) on hiDPI monitor. I do think it's distinct from #1660. Thanks!

graph TD
    id1>New data available] --> |download data|download((Data))
    download --> id2(Tapestri Insights App)
    id2 --> id3(Concatenate-all-samples.md)
    id3 --> python
    file1 --> python{{concat_tap_variants.py}}
    id2 --> |manually|file1["export.zip (AF.csv, Variants.csv, etc)"]
    python --> |CLI|file2[all_insights_variants.csv]
    file2 --> R{{save_all_significant_genotypes.R}}
    download -.-> |"(bed, barcodes, loom, vcf, etc)"| R
    R --> file3[significant_genotypes.*.csv]
    file2 --> plotAllJupyter{{UMAP_Plot_All_Samples_1_Figure.ipynb}}
    file3 --> plotAllJupyter{{UMAP_Plot_All_Samples_1_Figure.ipynb}}
    plotAllJupyter --> file6[UMAP image plots]
    file1 --> |"(AF.csv, NGT.csv)"|plotall{{plot_all_individ_mds-aml.py}}
    plotall --> file5[UMAP image plots with zygosity option]
    file1 --> |"(AF.csv)"|plotUMAP{{UMAP_Plot_AvsB.pynb}}
    plotUMAP --> file4[UMAP image plot]
    style id1 fill:#f0f0f0,stroke:#ccc
    style file1 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0
    style file2 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0
    style file3 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0
    style file4 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0
    style file5 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0
    style file6 fill:#ffffed,stroke:orange,stroke-width:1px,stroke-dasharray: 2, 0

[erichurkman]

FYI it seems doing

.label div {
    font-size: 0.85rem !important;
    line-height: unset !important;
    font-family: 'trebuchet ms', verdana, arial !important;
}

fixes mermaid labels for me to be readable and have line wraps appear.

[vassudanagunta]

@abnerlee can you better describe what this issue is? Because you keep closing issues without explanation, just pointing to this one. For example #3386 and #3403 require an upgrade of Mermaid to a newer version, but there is nothing in this issue above that is about updating Mermaid to a specific version, such as 8.4.8 which would resolve those to issues.

[abnerlee]

@vassudanagunta The title already said "Upload Diagram version", so I think this is what this issue's topic

[vassudanagunta]

@abnerlee So you mean "upgrade" not "upload"?

This issue here will never close because Mermaid will keep putting out new updates. It is already nearly 2 years old and has spanned many Mermaid upgrades.

By closing those other issues as duplicates of this one:

• We lose the ability to track the status of a specific issue because they are never tied to an issue that will close. People who search the issue database can't tell if the specific issue is actually closed or not, because they are marked as duplicates of an issue that never closes.

• You have no idea how many Mermaid feature requests are backlogged because you have closed them all. You can't count all the ones marked as duplicates of this one because some are actually resolved (in these two years you have updated Mermaid) and some are unresolved (awaiting the next update).

If, as I said above, you mark them as duplicates of a more specific issue, e.g. "Upgrade Mermaid to v8.4.8", problem solved.

Anyway, it's just my opinion. I know you are trying to make your issue database easier to manage, but I think it makes it harder.

[AhmedThahir]

For a temporary hack on MacOS, you can do something like:

Backup current Typora diagram lib

cp /Applications/Typora.app/Contents/Resources/TypeMark/lib/diagram/diagram.min.js /Applications/Typora.app/Contents/Resources/TypeMark/lib/diagram/diagram.min.js.bak

Replace current library with latest version.

wget -O /Applications/Typora.app/Contents/Resources/TypeMark/lib/diagram/diagram.min.js https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.10.2/mermaid.min.js

Some minor styling bugs (depending on the Typora theme you are using), but seems to work so far.

Note: this might break other diagram library features, although I don't think they are included any more.

Is there a solution like this for Windows?

[TendTo]

For a temporary hack on MacOS, you can do something like:
Backup current Typora diagram lib

cp /Applications/Typora.app/Contents/Resources/TypeMark/lib/diagram/diagram.min.js /Applications/Typora.app/Contents/Resources/TypeMark/lib/diagram/diagram.min.js.bak

Replace current library with latest version.

wget -O /Applications/Typora.app/Contents/Resources/TypeMark/lib/diagram/diagram.min.js https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.10.2/mermaid.min.js

Some minor styling bugs (depending on the Typora theme you are using), but seems to work so far.
Note: this might break other diagram library features, although I don't think they are included any more.

Is there a solution like this for Windows?

I managed to update the mermaid library on Windows, and I will explain what I did, although I can't really guarantee everything will still work, so you may want to keep a backup of the files you end up editing.

First, find the lib.asar file. It should be located in
C:\Program Files\Typora\resources\lib.asar
It is an archive format used by electron, so you can see it as an application specific .zip.

To open it you may use any tool you like. I used the ones suggested here.

So you would do the following:
npx asar extract lib.asar lib_unpacked
then replace the lib_unpacked\diagram\diagram.min.js with the newer version. I used this.

Lastly, use
npx asar pack lib_unpacked lib.asar

From the next launch, you should have the updated Mermaid version, although I'm not sure if the changes will persist when Typora updates.

[AhmedThahir]

It's unfortunate that typora still hasn't updated the mermaidjs version. Despite purchasing, I might switch to other alternatives. I'm quite disappointed.

[Qwaz]

I realized that Typora 1.1.5 is using Mermaid 8.8.3. Is there any plan to update the library anytime soon?

[AhmedThahir]

Any updates on this?

[rnahumaf]

Is there any update on issue #3371? That was posted in 2020, and I'm just facing the same issue here...

[alessandropellegrini]

Temporary hack on Linux (tested with Typora 1.2.4).

cd /usr/share/typora/resources
cp lib.asar lib.asar.bak
npx asar extract lib.asar destfolder
cd destfolder/diagram
wget -O diagram.min.js https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.1.1/mermaid.min.js
cd ../..
npx asar pack destfolder lib.asar

I am currently testing git diagrams and they apparently work.

[nanoant]

Hi @abnerlee. Any change to put latest stable 9.1.1 into next Typora 1.3-dev? Many great improvements happened to Mermaid e.g. %%{init: . Thanks for great software!
In meantime I'll try @alessandropellegrini hack.

Update: I think there's actually a bug in Typora that prevents %%init{ ... }%% being taken into account, since 8.14 shipped in latest 1.3.3-dev should have this feature in, hence filled #5291