Mermaid diagrams won't show up

[vjsrinath]

Any mermaid diagram is not shown. The problem is caused by how sanitizeHtml module is used.

 var cleanHTML = sanitizeHtml(fixed_html, {
            allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
                'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
                'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'img' 
            ]
        });

The fixed_html is cleaned before rendered on to page which loses all the html attributes.

For example if I have the following mermaid markdown,

<div class="mermaid" mardown="1">
graph LR;
    A[Square Rect] -- Link text --> B((Circle));
    A --> C(Round Rect);
    B --> D{Rhombus};
    C --> D;	
</div>

The cleanHTML will not have "mermaid" class in the div causing the mermaid documents failing to render.

<div>
graph LR;
    A[Square Rect] -- Link text --> B((Circle));
    A --> C(Round Rect);
    B --> D{Rhombus};
    C --> D;	
</div>

The possible fix is [**Updated]

        var cleanHTML = sanitizeHtml(fixed_html, {
            allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol',
                'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div',
                'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'img' 
            ],
            allowedAttributes: Object.assign({},sanitizeHtml.defaults.allowedAttributes, {
                '*': ['class']
            })
        });

@mrvautin I have raised a pull request fixing the issue. #194

[spatialsteve]

@vjsrinath I have tried this but it stops images from displaying in articles

[vjsrinath]

Hi @spatialsteve, I have fixed image loading issues and also mermaid diagrams now properly show up even in previews. #194

[savikko]

I think 42fbeeb40cc891977b0f6a3bd52925567a28cde2 solves this as well.