Mermaid diagrams not supporting inline comments behind '%%'

Bug reports
1

Steps to reproduce

create a new note with:

graph TD
    A(Kingdom: Animalia) --> I(Invertebrata);
    A --> V(Phylum: Chordata / Subphylum: Vertebrata);

    %% --- Invertebrates ---
    I --> M(Phylum: Mollusca);
    M --> Cph(Class: Cephalopoda);
    Cph --> Octopoda(Order: Octopoda);
    Octopoda --> Octopus;

    I --> Ar(Phylum: Arthropoda);
    Ar --> Ins(Class: Insecta);
    Ins --> Insects(Various Orders) %% Insects is a Class, examples diverge at Order/Family level

    %% --- Vertebrates ---
    V --> Ch(Class: Chondrichthyes - Cartilaginous Fish);
    Ch --> Elasmobranchii(Subclass: Elasmobranchii)
    Elasmobranchii --> Selachimorpha(Superorder: Selachimorpha) %% Sharks
    Selachimorpha --> Sharks;
    Elasmobranchii --> Batoidea(Superorder: Batoidea) %% Rays/Skates
    Batoidea --> Rays;

    V --> Os(Class: Osteichthyes / Actinopterygii - Bony Fish);
    Os --> Fish(General Bony Fish); %% General category, diverse Orders
    Os --> Cyprin(Order: Cypriniformes); %% Order for Goldfish/Carp
    Cyprin --> CypFam(Family: Cyprinidae);
    CypFam --> Goldfish(Species: Carassius auratus);

    V --> R(Class: Reptilia);
    R --> Sq(Order: Squamata); %% Lizards and Snakes share this Order
    Sq --> Lacertilia(Suborder: Lacertilia/Sauria); %% Lizards
    Lacertilia --> Lizards(Various Families);
    Sq --> Serpentes(Suborder: Serpentes); %% Snakes
    Serpentes --> Snakes(Various Families);

    V --> Av(Class: Aves - Birds);
    Av --> Birds(General Birds); %% General Category, diverse Orders
    Av --> Psit(Order: Psittaciformes); %% Parrots, Budgies, Cockatoos
    Psit --> ParrotsBudgies(Example: Parrots/Budgies);

    V --> Ma(Class: Mammalia);
    Ma --> Pr(Order: Primates);
    Pr --> Hominidae(Family: Hominidae);
    Hominidae --> Homininae(Subfamily: Homininae);
    Homininae --> Homo(Genus: Homo);
    Homo --> Humans(Species: Homo sapiens);

    Ma --> Car(Order: Carnivora); %% Dogs, Cats, Ferrets share this Order
    Car --> Caniformia(Suborder: Caniformia);
    Caniformia --> Canidae(Family: Canidae); %% Dogs
    Canidae --> Dogs(Species: Canis lupus familiaris);
    Caniformia --> Mustelidae(Family: Mustelidae); %% Ferrets, Weasels
    Mustelidae --> Ferrets(Species: Mustela putorius furo);
    Car --> Feliformia(Suborder: Feliformia);
    Feliformia --> Felidae(Family: Felidae); %% Cats
    Felidae --> Cats(Species: Felis catus);

    Ma --> Ro(Order: Rodentia); %% Guinea Pigs, Hamsters, Rats/Mice share this Order
    Ro --> Hystricomorpha(Suborder: Hystricomorpha);
    Hystricomorpha --> Caviidae(Family: Caviidae); %% Guinea Pigs
    Caviidae --> GuineaPigs(Species: Cavia porcellus);
    Ro --> Myomorpha(Suborder: Myomorpha);
    Myomorpha --> Cricetidae(Family: Cricetidae); %% Hamsters, Voles
    Cricetidae --> Cricetinae(Subfamily: Cricetinae);
    Cricetinae --> Hamsters(Various Genera/Species);
    Myomorpha --> Muridae(Family: Muridae); %% Rats, Mice, Gerbils
    Muridae --> RatsMice(Genera: Rattus, Mus);

    Ma --> La(Order: Lagomorpha); %% Rabbits, Hares (Distinct from Rodents)
    La --> Leporidae(Family: Leporidae);
    Leporidae --> Rabbits(Genus: Oryctolagus / Species: cuniculus);

    Ma --> Cet(Order: Cetacea - Whales & Dolphins); %% Often now placed within Artiodactyla
    Cet --> Odontoceti(Suborder: Odontoceti - Toothed Whales);
    Odontoceti --> Delphinidae(Family: Delphinidae - Oceanic Dolphins);
    Delphinidae --> Dolphins(Various Genera);

    Ma --> Pe(Order: Perissodactyla - Odd-toed Ungulates);
    Pe --> Equidae(Family: Equidae);
    Equidae --> Equus(Genus: Equus);
    Equus --> Horses(Species: Equus caballus);

    %% Styling endpoint nodes
    classDef endpoint fill:#e6ffed,stroke:#006622,stroke-width:2px;
    class Octopus,Insects,Sharks,Rays,Goldfish,Lizards,Snakes,ParrotsBudgies,Humans,Dogs,Cats,Ferrets,GuineaPigs,Hamsters,RatsMice,Rabbits,Dolphins,Horses,Fish,Birds endpoint;

Did you follow the troubleshooting guide? [Y/N]

Yes - used sandbox

Expected result

that the diagram to be rendered

Actual result

Error parsing Mermaid diagram!

Parse error on line 11:
...cts(Various Orders) %% Insects is a Clas
-----------------------^
Expecting 'SEMI', 'NEWLINE', 'EOF', 'AMP', 'START_LINK', 'LINK', got 'NODE_STRING'

Environment

SYSTEM INFO:
	Obsidian version: v1.8.9
	Installer version: v1.8.9
	Operating system: Windows 11 Pro 10.0.26100
	Login status: not logged in
	Language: en-GB
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

Additional information

This is the same code rendered in vs code.

image
image1831×791 86 KB

2

I got curious :innocent: and per Mermaid flowchart documentation:

Comments need to be on their own line, and must be prefaced with %% (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax.

… So, I don’t think this is an Obsidian bug but much more something Mermaid just doesn’t support, potentially anymore (?) :woman_shrugging:
(It also doesn’t work in Mermaid’s Live Editor, with the same error, on the same line).

I mean, following Mermaid’s documentation, when it comes to comments, this:

    %% --- Invertebrates ---
    I --> M(Phylum: Mollusca);
    M --> Cph(Class: Cephalopoda);
    Cph --> Octopoda(Order: Octopoda);
    Octopoda --> Octopus;

… is correct.

While, this:

    Ins --> Insects(Various Orders) %% Insects is a Class, examples diverge at Order/Family level

… isn’t supported by Mermaid and breaks the parser (as the comment isn’t on its own line).

But this:

    %% Insects is a Class, examples diverge at Order/Family level
    Ins --> Insects(Various Orders)

… would work :blush:.

Maybe VSCode doesn’t rely on the same version of Mermaid Obsidian does though :woman_shrugging: …
That could explain why you’re able to render the graph in VSCode but not in Obsidian.