search

mermaidjs / mermaid-live-editor

Location has moved to https://github.com/mermaid-js/mermaid-live-editor
https://mermaidjs.github.io/mermaid-live-editor/
MIT License
977 stars 181 forks source link

Abnormal display in Chinese #4

Closed waterXu closed 6 years ago

waterXu commented 6 years ago

Some Chinese words have been shown to be messy，like��。 For example ： alt 对比距离上次下载资源是否超过1天时间 show：alt 对比距离上次下载资源�� System ： MacOS

tylerlong commented 6 years ago

What are the original words?

waterXu commented 6 years ago

You can try to enter a certain amount of Chinese，You can see the problem recur.

tylerlong commented 6 years ago

I can reproduce it. I think it is caused by base64 encoding/decoding. I will investigate when I have a second.

tylerlong commented 6 years ago

Fixed

waterXu commented 6 years ago

good!!!

waterXu commented 6 years ago

hi~ The Mermaid Live Editor "LINK TO VIEW" function work good，but click "DOWNLOAD SVG " button output svg is not work！I guess it's also Chinese.

tylerlong commented 6 years ago

What do you mean by "is not work"? I just tried and it worked for me.

Could you please force refresh your browser and try again?

waterXu commented 6 years ago

sorry, I mean I open the download svg in chrome not work good. The sequenceDiagram shows not all. I read the svg file, I guess the [ processWithChecker方法检查是否有需要更新的资源 ] was the result. I received a error report： This page contains the following errors: error on line 360 at column 10609: PCDATA invalid Char value 8 Below is a rendering of the page up to the first error.

tylerlong commented 6 years ago

I cannot reproduce the issue. Take this sequence diagram for example: https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCmxvb3AgZXZlcnkgZGF5CiAgICBBbGljZS0-PkpvaG46IEhlbGxvIEpvaG4sIGhvdyBhcmUgeW91PwogICAgSm9obi0tPj5BbGljZTog6Led56a75LiK5qyh5LiL6L296LWE5rqQ5piv5ZCm6LaF6L-HMeWkqeaXtumXtOi3neemu-S4iuasoeS4i-i9vei1hOa6kOaYr-WQpui2hei_hzHlpKnml7bpl7QhCmVuZAo

I can download the svg and open it in Chrome without problem.

Could you please provide a link to your sequence diagram?

waterXu commented 6 years ago

error sequence diagram： https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCnBhcnRpY2lwYW50IOaHkuS6uuefreivreaXtuW6j-WbvgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFDb250ZW50Vmlld0NvbnRyb2xsZXIKcGFydGljaXBhbnQgQklDb3Jwb3JhQ2F0ZWdvcnlWaWV3Q29udHJvbGxlcgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFNYW5hZ2VyCnBhcnRpY2lwYW50IEJJQXBwZWFyYW5jZU1hbmFnZXIKcGFydGljaXBhbnQgQklBcHBlYXJhbmNlQ2hlY2tlcgpwYXJ0aWNpcGFudCBCSUFwcGVhcmFuY2VJbnN0YWxsZXIKcGFydGljaXBhbnQgQklVc2VyU3luY1ZpZXdDb250cm9sbGVyCnBhcnRpY2lwYW50IEJJTGF6eUNvcnBvcmFTeW4Kbm90ZSBvdmVyIEJJVXNlclN5bmNWaWV3Q29udHJvbGxlcjrnmb7luqbkupHlpIfku70KTm90ZSBvdmVyIEJJQXBwZWFyYW5jZU1hbmFnZXI65LiL5Y-R6LWE5rqQ566h55CGCkJJQXBwZWFyYW5jZU1hbmFnZXItPj5CSUFwcGVhcmFuY2VNYW5hZ2VyOmlzTmVlZENoZWNrIAphbHQg6Led56a75LiK5qyh5pu05paw6LWE5rqQ5piv5ZCm6LaF6L-H5LiA5aSpCiAgICBOb3RlIG92ZXIgQklBcHBlYXJhbmNlTWFuYWdlcjpyZXF1ZXMgdXBkYXRlCiAgICBCSVVwZGF0ZXJQcm9jZXNzLS0-QklVcGRhdGVyUHJvY2Vzczpwcm9jZXNzV2l0aENoZWNrZXIKICAgIGFsdCAI5pa55rOV5qOA5p-l5piv5ZCm5pyJ6ZyA6KaBCOabtOaWsOeahOi1hOa6kAogICAgICAgTm90ZSByaWdodCBvZiBCSUFwcGVhcmFuY2VNYW5hZ2VyOnByb2Nlc3NXaXRoRG93bmxvYWRlcuW8gOWni-abtOaWsOi1hOa6kOivt-axggogICAgICAgTm90ZSByaWdodCBvZiBCSUFwcGVhcmFuY2VNYW5hZ2VyOkJJQXBwZWFyYW5jZUluc3RhbGxlcueahGRvSW5zdGFsbOWwhuS4i-i9veeahOi1hOa6kOaWh-S7tuino-WOi-WQjuWtmOWIsOaymeebkgogICAgZWxzZQogICAgICAgTm90ZSByaWdodCBvZiBCSUFwcGVhcmFuY2VNYW5hZ2VyOuayoeaciemcgOimgeabtOaWsOeahOi1hOa6kCAgICAgICAgCiAgICBlbmQKZWxzZQogICAgTm90ZSBvdmVyIEJJQXBwZWFyYW5jZU1hbmFnZXI6bm8gbmVlZCBsb2FkIGRhdGEKZW5k

tylerlong commented 6 years ago

I confirm that I can reproduce the error:

This page contains the following errors:

error on line 360 at column 10648: PCDATA invalid Char value 8
Below is a rendering of the page up to the first error.
tylerlong commented 6 years ago

I did some research and it seems that not all characters are allowed in XML:

waterXu commented 6 years ago

I think it is a conditional nested statement that caused the error： The error example： https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFDb250ZW50Vmlld0NvbnRyb2xsZXIKcGFydGljaXBhbnQgQklDb3Jwb3JhQ2F0ZWdvcnlWaWV3Q29udHJvbGxlcgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFNYW5hZ2VyCnBhcnRpY2lwYW50IEJJQXBwZWFyYW5jZU1hbmFnZXIKcGFydGljaXBhbnQgQklBcHBlYXJhbmNlQ2hlY2tlcgpwYXJ0aWNpcGFudCBCSUFwcGVhcmFuY2VJbnN0YWxsZXIKcGFydGljaXBhbnQgQklVc2VyU3luY1ZpZXdDb250cm9sbGVyCnBhcnRpY2lwYW50IEJJTGF6eUNvcnBvcmFTeW4KTm90ZSBvdmVyIEJJQXBwZWFyYW5jZU1hbmFnZXI6ZG93bmxvYWREYXRhCkJJQXBwZWFyYW5jZU1hbmFnZXItPj5CSUFwcGVhcmFuY2VNYW5hZ2VyOmlzTmVlZENoZWNrIAphbHQgb25lRGF5CiAgICBOb3RlIG92ZXIgQklBcHBlYXJhbmNlTWFuYWdlcjpyZXF1ZXMgdXBkYXRlCiAgICBCSVVwZGF0ZXJQcm9jZXNzLS0-QklVcGRhdGVyUHJvY2Vzczpwcm9jZXNzV2l0aENoZWNrZXIKICAgIGFsdCAIdGVzdAogICAgICAgTm90ZSByaWdodCBvZiBCSUFwcGVhcmFuY2VNYW5hZ2VyOllFUwogICAgICAgCiAgICBlbHNlCiAgICAgIE5vdGUgcmlnaHQgb2YgQklBcHBlYXJhbmNlTWFuYWdlcjpOTyAgICAgICAKICAgIGVuZAplbHNlCiAgICBOb3RlIG92ZXIgQklBcHBlYXJhbmNlTWFuYWdlcjpubyBuZWVkIGxvYWQgZGF0YQplbmQ

The correct example： https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFDb250ZW50Vmlld0NvbnRyb2xsZXIKcGFydGljaXBhbnQgQklDb3Jwb3JhQ2F0ZWdvcnlWaWV3Q29udHJvbGxlcgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFNYW5hZ2VyCnBhcnRpY2lwYW50IEJJQXBwZWFyYW5jZU1hbmFnZXIKcGFydGljaXBhbnQgQklBcHBlYXJhbmNlQ2hlY2tlcgpwYXJ0aWNpcGFudCBCSUFwcGVhcmFuY2VJbnN0YWxsZXIKcGFydGljaXBhbnQgQklVc2VyU3luY1ZpZXdDb250cm9sbGVyCnBhcnRpY2lwYW50IEJJTGF6eUNvcnBvcmFTeW4KTm90ZSBvdmVyIEJJQXBwZWFyYW5jZU1hbmFnZXI6ZG93bmxvYWREYXRhCkJJQXBwZWFyYW5jZU1hbmFnZXItPj5CSUFwcGVhcmFuY2VNYW5hZ2VyOmlzTmVlZENoZWNrIAphbHQgb25lRGF5CiAgICBOb3RlIG92ZXIgQklBcHBlYXJhbmNlTWFuYWdlcjpyZXF1ZXMgdXBkYXRlCiAgICBCSVVwZGF0ZXJQcm9jZXNzLS0-QklVcGRhdGVyUHJvY2Vzczpwcm9jZXNzV2l0aENoZWNrZXIKCmVsc2UKICAgIE5vdGUgb3ZlciBCSUFwcGVhcmFuY2VNYW5hZ2VyOm5vIG5lZWQgbG9hZCBkYXRhCmVuZA

tylerlong commented 6 years ago

That is important finding. I will take a look when I have some time.

tylerlong commented 6 years ago

I think there are special characters in your "test". The following works for me:

https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFDb250ZW50Vmlld0NvbnRyb2xsZXIKcGFydGljaXBhbnQgQklDb3Jwb3JhQ2F0ZWdvcnlWaWV3Q29udHJvbGxlcgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFNYW5hZ2VyCnBhcnRpY2lwYW50IEJJQXBwZWFyYW5jZU1hbmFnZXIKcGFydGljaXBhbnQgQklBcHBlYXJhbmNlQ2hlY2tlcgpwYXJ0aWNpcGFudCBCSUFwcGVhcmFuY2VJbnN0YWxsZXIKcGFydGljaXBhbnQgQklVc2VyU3luY1ZpZXdDb250cm9sbGVyCnBhcnRpY2lwYW50IEJJTGF6eUNvcnBvcmFTeW4KTm90ZSBvdmVyIEJJQXBwZWFyYW5jZU1hbmFnZXI6ZG93bmxvYWREYXRhCkJJQXBwZWFyYW5jZU1hbmFnZXItPj5CSUFwcGVhcmFuY2VNYW5hZ2VyOmlzTmVlZENoZWNrIAphbHQgb25lRGF5CiAgICBOb3RlIG92ZXIgQklBcHBlYXJhbmNlTWFuYWdlcjpyZXF1ZXMgdXBkYXRlCiAgICBCSVVwZGF0ZXJQcm9jZXNzLS0-QklVcGRhdGVyUHJvY2Vzczpwcm9jZXNzV2l0aENoZWNrZXIKICAgIGFsdCB0ZXN0CiAgICAgICBOb3RlIHJpZ2h0IG9mIEJJQXBwZWFyYW5jZU1hbmFnZXI6WUVTCiAgICAgICAKICAgIGVsc2UKICAgICAgTm90ZSByaWdodCBvZiBCSUFwcGVhcmFuY2VNYW5hZ2VyOk5PICAgICAgIAogICAgZW5kCmVsc2UKICAgIE5vdGUgb3ZlciBCSUFwcGVhcmFuY2VNYW5hZ2VyOm5vIG5lZWQgbG9hZCBkYXRhCmVuZA

And the code is identical

tylerlong commented 6 years ago

This also works: https://mermaidjs.github.io/mermaid-live-editor/#/edit/c2VxdWVuY2VEaWFncmFtCnBhcnRpY2lwYW50IOaHkuS6uuefreivreaXtuW6j-WbvgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFDb250ZW50Vmlld0NvbnRyb2xsZXIKcGFydGljaXBhbnQgQklDb3Jwb3JhQ2F0ZWdvcnlWaWV3Q29udHJvbGxlcgpwYXJ0aWNpcGFudCBCSUNvcnBvcmFNYW5hZ2VyCnBhcnRpY2lwYW50IEJJQXBwZWFyYW5jZU1hbmFnZXIKcGFydGljaXBhbnQgQklBcHBlYXJhbmNlQ2hlY2tlcgpwYXJ0aWNpcGFudCBCSUFwcGVhcmFuY2VJbnN0YWxsZXIKcGFydGljaXBhbnQgQklVc2VyU3luY1ZpZXdDb250cm9sbGVyCnBhcnRpY2lwYW50IEJJTGF6eUNvcnBvcmFTeW4Kbm90ZSBvdmVyIEJJVXNlclN5bmNWaWV3Q29udHJvbGxlcjrnmb7luqbkupHlpIfku70KTm90ZSBvdmVyIEJJQXBwZWFyYW5jZU1hbmFnZXI65LiL5Y-R6LWE5rqQ566h55CGCkJJQXBwZWFyYW5jZU1hbmFnZXItPj5CSUFwcGVhcmFuY2VNYW5hZ2VyOmlzTmVlZENoZWNrIAphbHQg6Led56a75LiK5qyh5pu05paw6LWE5rqQ5piv5ZCm6LaF6L-H5LiA5aSpCiAgICBOb3RlIG92ZXIgQklBcHBlYXJhbmNlTWFuYWdlcjpyZXF1ZXMgdXBkYXRlCiAgICBCSVVwZGF0ZXJQcm9jZXNzLS0-QklVcGRhdGVyUHJvY2Vzczpwcm9jZXNzV2l0aENoZWNrZXIKICAgIGFsdCDmlrnms5Xmo4Dmn6XmmK_lkKbmnInpnIDopoHmm7TmlrDnmoTotYTmupAKICAgICAgIE5vdGUgcmlnaHQgb2YgQklBcHBlYXJhbmNlTWFuYWdlcjpwcm9jZXNzV2l0aERvd25sb2FkZXLlvIDlp4vmm7TmlrDotYTmupDor7fmsYIKICAgICAgIE5vdGUgcmlnaHQgb2YgQklBcHBlYXJhbmNlTWFuYWdlcjpCSUFwcGVhcmFuY2VJbnN0YWxsZXLnmoRkb0luc3RhbGzlsIbkuIvovb3nmoTotYTmupDmlofku7bop6PljovlkI7lrZjliLDmspnnm5IKICAgIGVsc2UKICAgICAgIE5vdGUgcmlnaHQgb2YgQklBcHBlYXJhbmNlTWFuYWdlcjrmsqHmnInpnIDopoHmm7TmlrDnmoTotYTmupAgICAgICAgIAogICAgZW5kCmVsc2UKICAgIE5vdGUgb3ZlciBCSUFwcGVhcmFuY2VNYW5hZ2VyOm5vIG5lZWQgbG9hZCBkYXRhCmVuZA

In your code alt 方法检查是否有需要更新的资源, there are two characters between alt and 方, one of them is invisible, zero-width and invalid for XML.

And from above, you can see that GitHub cannot display the string properly either. So the solution is: make there are no weird white space or invisible characters in you text.

Closing. Feel free to create a new issue if you still have questions.