Syntax error even with correct syntax

[iury souza]

🐛 Describe the bug

Mermaid can fail to render a graph even with correct syntax.

Already reported here: Syntax error even with correct syntax
This is a bug on the Mermaid renderer. Keep reading if you're looking for workarounds.

⚠️ Current behavior

It's not clear when, as I only saw this issue in one scenario, but some graphs can fail to render.

✅ Expected behavior

Graph should render normally.

Workaround alternatives

• Change the renderer:
  If you get this issue you can manually change the renderer by adding this to the init block and it will solve the issue. Although, changing the render will change the look of the graph.

%%{
  init: {
    "flowchart": { "defaultRenderer": "elk"}
  }
}%%

• Use the showFullPath option:
  Set showFullPath property to true:

moduleGraphConfig {
    //...
    showFullPath.set(true)
}

💣 Steps to reproduce

Apply the plugin on TIVI and use the focusedModules property like so:

Module Graph plugin options:

moduleGraphConfig {
  readmePath.set("./docs/module-graph.md")
  heading.set("### Module Graph")
  focusedModulesRegex.set(".*(data).*")
}

Generated graph:

%%{
  init: {
    'theme': 'neutral'
  }
}%%

graph LR
  subgraph :api
    :api:trakt["trakt"]
    :api:tmdb["tmdb"]
  end
  subgraph :common
    :common:imageloading["imageloading"]
  end
  subgraph :common:ui
    :common:ui:compose["compose"]
  end
  subgraph :common:ui:resources
    :common:ui:resources:strings["strings"]
  end
  subgraph :core
    :core:base["base"]
    :core:analytics["analytics"]
    :core:preferences["preferences"]
  end
  subgraph :core:logging
    :core:logging:api["api"]
  end
  subgraph :data
    :data:traktauth["traktauth"]
    :data:models["models"]
    :data:db-sqldelight["db-sqldelight"]
    :data:db["db"]
    :data:showimages["showimages"]
    :data:legacy["legacy"]
    :data:test["test"]
    :data:followedshows["followedshows"]
    :data:episodes["episodes"]
    :data:shows["shows"]
    :data:trendingshows["trendingshows"]
    :data:licenses["licenses"]
    :data:search["search"]
    :data:watchedshows["watchedshows"]
    :data:recommendedshows["recommendedshows"]
    :data:popularshows["popularshows"]
    :data:relatedshows["relatedshows"]
    :data:traktusers["traktusers"]
  end
  subgraph :shared
    :shared:common["common"]
    :shared:prod["prod"]
    :shared:qa["qa"]
  end
  subgraph :ui
    :ui:root["root"]
    :ui:account["account"]
    :ui:licenses["licenses"]
  end
  :ui:root --> :data:traktauth
  :common:ui:compose --> :data:models
  :data:db-sqldelight --> :data:db
  :data:db-sqldelight --> :core:base
  :data:showimages --> :data:models
  :data:showimages --> :data:db
  :data:showimages --> :data:legacy
  :data:showimages --> :api:trakt
  :data:showimages --> :api:tmdb
  :data:test --> :core:analytics
  :data:test --> :core:logging:api
  :data:test --> :data:db-sqldelight
  :data:test --> :data:followedshows
  :data:test --> :data:episodes
  :data:test --> :data:showimages
  :data:test --> :data:shows
  :data:test --> :data:legacy
  :data:trendingshows --> :data:models
  :data:trendingshows --> :data:db
  :data:trendingshows --> :data:legacy
  :data:trendingshows --> :api:trakt
  :data:trendingshows --> :api:tmdb
  :shared:common --> :data:db-sqldelight
  :shared:common --> :data:licenses
  :data:followedshows --> :data:models
  :data:followedshows --> :data:traktauth
  :data:followedshows --> :api:trakt
  :data:followedshows --> :api:tmdb
  :data:followedshows --> :data:db
  :data:followedshows --> :data:legacy
  :data:shows --> :data:models
  :data:shows --> :data:db
  :data:shows --> :data:legacy
  :data:shows --> :api:trakt
  :data:shows --> :api:tmdb
  :shared:prod --> :data:traktauth
  :data:search --> :data:models
  :data:search --> :data:db
  :data:search --> :data:legacy
  :data:search --> :api:trakt
  :data:search --> :api:tmdb
  :ui:account --> :data:traktauth
  :data:licenses --> :core:base
  :data:licenses --> :core:logging:api
  :data:watchedshows --> :data:models
  :data:watchedshows --> :data:db
  :data:watchedshows --> :data:legacy
  :data:watchedshows --> :api:trakt
  :data:watchedshows --> :api:tmdb
  :ui:licenses --> :data:licenses
  :data:legacy --> :core:base
  :data:legacy --> :api:trakt
  :data:legacy --> :api:tmdb
  :data:legacy --> :core:logging:api
  :data:legacy --> :data:models
  :data:legacy --> :data:db
  :common:ui:resources:strings --> :data:models
  :common:imageloading --> :data:models
  :common:imageloading --> :data:episodes
  :common:imageloading --> :data:showimages
  :data:models --> :core:base
  :data:recommendedshows --> :data:models
  :data:recommendedshows --> :data:db
  :data:recommendedshows --> :data:legacy
  :data:recommendedshows --> :api:trakt
  :data:recommendedshows --> :api:tmdb
  :data:db --> :data:models
  :data:db --> :core:base
  :data:traktauth --> :core:base
  :data:traktauth --> :core:logging:api
  :data:episodes --> :core:preferences
  :data:episodes --> :data:models
  :data:episodes --> :data:traktauth
  :data:episodes --> :api:trakt
  :data:episodes --> :api:tmdb
  :data:episodes --> :data:db
  :data:episodes --> :data:legacy
  :shared:qa --> :data:traktauth
  :domain --> :data:models
  :domain --> :data:legacy
  :domain --> :data:episodes
  :domain --> :data:followedshows
  :domain --> :data:popularshows
  :domain --> :data:recommendedshows
  :domain --> :data:relatedshows
  :domain --> :data:search
  :domain --> :data:showimages
  :domain --> :data:shows
  :domain --> :data:traktauth
  :domain --> :data:traktusers
  :domain --> :data:trendingshows
  :domain --> :data:watchedshows
  :domain --> :data:licenses
  :domain --> :data:db
  :data:relatedshows --> :data:models
  :data:relatedshows --> :data:db
  :data:relatedshows --> :data:legacy
  :data:relatedshows --> :api:trakt
  :data:relatedshows --> :api:tmdb
  :api:trakt --> :data:traktauth
  :data:traktusers --> :data:models
  :data:traktusers --> :data:db
  :data:traktusers --> :data:legacy
  :data:traktusers --> :api:trakt
  :data:traktusers --> :api:tmdb
  :data:popularshows --> :data:models
  :data:popularshows --> :data:db
  :data:popularshows --> :data:legacy
  :data:popularshows --> :api:trakt
  :data:popularshows --> :api:tmdb

classDef focus fill:#769566,stroke:#fff,stroke-width:2px,color:#fff;
class :data:traktauth focus
class :data:models focus
class :data:db-sqldelight focus
class :data:db focus
class :data:showimages focus
class :data:legacy focus
class :data:test focus
class :data:followedshows focus
class :data:episodes focus
class :data:shows focus
class :data:trendingshows focus
class :data:licenses focus
class :data:search focus
class :data:watchedshows focus
class :data:recommendedshows focus
class :data:popularshows focus
class :data:relatedshows focus
class :data:traktusers focus

Loading