Feature/sequence diagrams improvements

[dany74q]

📑 Summary

This commit fixes some bugs, and I believe, improves upon the current
implementation.

Resolves #494

📏 Design Decisions

Mermaid is awesome - I use it a lot (it's even more awesome w/ emacs & ob-mermaid);
and that's why I think that we should make a few improvements to the sequence diagram rendering.

I think that it falls short, compared to other diagram types, in that it renders rectangles with a fixed size, as opposed to dynamically scaling them when, for instance, the text is larger than the container.

There are workaround, of course - one can set a larger width for the rectangles - that yield an awkward result though, b/c all rectangles are rendered with the same width;
and we'd probably like to have the ability to have a sole rectangle that should be bigger, and others that should be smaller.

The following is a list of proposed fixes that I believe would make the usage of sequence diagrams better:

1. Control over note font size, family and alignment (now defaults to
   center)
2. Dynamic actor resizing - actor's width will now scale if its
   description is bigger than the static configured width
3. Dynamic actor margins - the margin between actors will now be
   dynamically calculated by taking into account the width of connecting
   messages or notes
4. Fixed a small visual annoyance where a loop arrow would intersect
   with the text it loops on
5. Fixed a bug where if global config -> fontFamily wasn't defined, it
   would override the actorFontFamily with an undefined
6. Removed some stale / commented out code
7. Added missing config variables to the global config object in mermaidAPI.js
8. Fixed doc strings for methods which had an outdated one
9. Added e2e tests for the above scenarios
10. Added documentation for the new config keys
11. Linted the sequence diagram markdown doc
12. Refactored a bit where necessary

All tests pass - and looking at the generated dist/index.html, with some additional use cases, looks pretty good.

📋 Tasks

Make sure you

• [ /] 📖 have read the contribution guidelines
• [ /] 💻 have added unit/e2e tests (if appropriate)
• [ /] 🔖 targeted develop branch

[knsv]

Hi! Good stuff!

This looks neat and we should add this to mermaid. One issue is that by bypassing the template this causes extra administration and increasing the risk that this is missed in the release notes. Could you please add that? This should not take to long.

Next thing, could you also add those diagrams you mentioned to rendering tests? Its quite easy, look in cypress/integration/rendering/sequenceDiagram.spec.js

Here is a sample test:

    it('should render autonumber when autonumber keyword is used', () => {
      imgSnapshotTest(
        `
        sequenceDiagram
        autonumber
        Alice->>John: Hello John, how are you?
        loop Healthcheck
            John->>John: Fight against hypochondria
        end
        Note right of John: Rational thoughts!
        John-->>Alice: Great!
        John->>Bob: How about you?
        Bob-->>John: Jolly good!
      `,
      {}
      );
    });

Just add new ones with diagram showing this new feature.

This helps testing, making sure it wont brea by some other change in the future.

Looking forward to merging this.

[dany74q]

Hey hey @knsv - thanks for the feedback, I've revisit the PR, added e2e tests
and updated the documentation.

Feel free to go over it (For a quick diff, you can add a cy.screenshot() to cypress, and compare the added tests between the versions) -
I think the results are pretty cool.

Let me know what you think,
Danny

[knsv]

Thanks! The extra effort is much appreciated!