Correctly render mermaid digrams inside details blocks

What does this MR do?

Issue: #28495 (closed)

Only render Mermaid diagrams when they become visible.

Previously they were being rendered when collapsed, which gave them a computed width/height 0 (they inherited default SVG size of 16x16

Screenshots

Video showing a comment with 4 diagrams. One (outside details block) is rendered upfront. Second one is rendered when details block is expanded. Other 2 are rendered when other details block is expanded, along with the text 'great'.

Screen_Recording_2020-01-28_at_11.20.31_am

Does this MR meet the acceptance criteria?

Conformity

• Changelog entry

• Documentation (if required)

• Code review guidelines

• Merge request performance guidelines

• Style guides

• Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process.

• Tested in all supported browsers