How can I render mermaid diagrams of type C4 in asciidoctor?

Question

I am currently trying to render mermaid C4 diagrams using asciidoctor. Mermaid itself can be rendered using asciidoctor. The following example is working as expected.

[mermaid,test]
....
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
....

This is my try to render C4 and the result:

[mermaid]
....
C4Context
    Person(Customer, "Member")
    Person(Ops, "Ops")
....

Is an include necessary for C4 where you get the C4Context from? My feeling is that this is missing.

Answer 1

According to the Mermaid docs:

C4 Diagram: This is an experimental diagram for now. The syntax and
properties can change in future releases. Proper documentation will be
provided when the syntax is stable.

The problem is likely that the Asciidoctor dependency you're using to render Mermaid diagrams is using an older version of Mermaid without C4 support.

The Kroki site supports Mermaid C4 today, so you might try using asciidoctor-kroki instead of your current dependency.