Larger generated svg elements do not behave responsive. The current maxWidth option doesn't really solve this.
NOTE: This may address #4 and possibly make #6 obsolete
This also fixes a react error with xmlnslink. I believe this was being causes by htmlparser2 (unconfirmed).
What
This introduces support for custom attribute strings that can be used either globally through pluginOptions or inline on each code fence. It also changes the default style attributes to be responsive by default.
The default style changes could have a breaking change for some users. I struggled deciding between making this style the default or forcing the developer to set it. Since I believe most use cases would benefit from these changes I decided to make them the default. This means a major version bump would make sense. It also brings into question if maxWidth makes sense any more as it can be easily simulated through the custom attributes.
Replaced htmlparser2 with cheerio to allow for easier manipulation of
the svg elements through its feature rich api
Updated node visitor to use the meta field which can supply
additional code fence parameters
Changed default svg style attribute to max-width: 100%; height: auto to be
responsive by default. This ensures the the default sizing behaviour
works in most cases without any changes or overrides.
Updated all snapshots and manually verified visuals
Fixed os specific custom test issue so it should work on any machine
Usage
Inline:
```plantuml
@startuml style="max-width: 50vw; height: auto;"
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
Why
Larger generated svg elements do not behave responsive. The current
maxWidth
option doesn't really solve this.NOTE: This may address #4 and possibly make #6 obsolete
This also fixes a react error with
xmlnslink
. I believe this was being causes byhtmlparser2
(unconfirmed).What
This introduces support for custom attribute strings that can be used either globally through pluginOptions or inline on each code fence. It also changes the default style attributes to be responsive by default.
This is modeled off
gatsby-remark-graphviz
:Breaking Changes
The default style changes could have a breaking change for some users. I struggled deciding between making this style the default or forcing the developer to set it. Since I believe most use cases would benefit from these changes I decided to make them the default. This means a major version bump would make sense. It also brings into question if
maxWidth
makes sense any more as it can be easily simulated through the custom attributes.Details of changes
meta
field which can supply additional code fence parametersmax-width: 100%; height: auto
to be responsive by default. This ensures the the default sizing behaviour works in most cases without any changes or overrides.Usage
Inline: