mermaid-gitbook
mermaid-gitbook copied to clipboard
Using mermaid on android
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
try font size 300% when on android