mermaid-gitbook icon indicating copy to clipboard operation
mermaid-gitbook copied to clipboard

Using mermaid on android

Open prtuson opened this issue 5 years ago • 1 comments

I having been successfully using mermaid on web browsers for some time now. However, I am now trying to use it within an android application. I am using ionic cordova 3 for the development. I initialise this code: var config = { startOnLoad:false, cloneCssStyles:false, leftMargin:0, themeCSS:'.label {display:block; margin:0 auto; text-align:center;}\nlabel {color:#8f9321; display:block; font-weight:bold;}\nsection {font-weight:bold;}\n.output {font-size:3rem;}', flowchart:{useMaxWidth:true, htmlLabels:true} } mermaid.initialize(config); and render using this:

    mermaid.render("routeGraph", this.careerInfo.route, (svgCode) => {this.svgCode = this._sanitizer.bypassSecurityTrustHtml(svgCode);});

When testing on the web browser using 'ionic serve' the resulting chart is excellent. However, when I move it to the android phone using 'ionic cordova run android' the nodes are scaled to the amount of text but the text is tiny and placed at the top of the node. Changing the size of the text makes no difference. I am attaching an image of a simple example. x-special/nautilus-clipboard copy file:///home/peter/Pictures/Screenshot_2019-06-17-15-41-14-237_org.eluceo.ishine.png

Can you advise me on what I am doing wrong and how to improve on this.

Peter

prtuson avatar Jun 17 '19 14:06 prtuson

try font size 300% when on android

iqmia avatar Mar 16 '20 14:03 iqmia