Is it possible to add notes on a class diagram?

[project2501]

Hi,

Notes on a class diagram are very useful to convey some important design details. Unfortunately, I couldn't figure out, how can I add notes on a class diagram. Is it possible at all with mermaid?

Thanks!

[jgreywolf]

It is possible. You can add notes to other diagrams, but there is no support for this in classDiagrams as of now.

[project2501]

Thank you for replying. Notes on class diagrams are what I need though. How should we proceed with the issue? Leave it open to call for contribution, or close it?

[johnverbiest]

I'll look into it :)

[jgreywolf]

@johnverbiest Any progress? :)

[alexandrosyiangou]

Hey there! @jgreywolf If possible I would like to give this a try :slightly_smiling_face:

[jgreywolf]

@alexandrosyiangou Any update on this?

[kiah2008]

look forward to this enhancement.

[goldbergyoni]

Looking forward

[kbsizer]

This would be a great enhancement. Sometimes, you just need a little blurb explaining, "Here's where I'm going with this"

[ACMCMC]

Hi, has there been any progress on this issue? I would be very interested in having this feature as well :) @alexandrosyiangou

[BorisBrock]

The missing notes is the only thing keeping me from migrating from Enterprise Architect to Mermaid. I would love to see this feature 👍

[DKurilo]

I created PR to add the way to add notes. Right now it's very basic notes. Later we can make it better. Also I don't know if dagre-d3 is still supported. It is broken for class diagram because of these lines: https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/utils.ts#L313, looks like someone forgot to remove them. But I made it working. Surely it's easier to work on one renderer only. :) I tested it with mermaid-cli and configs:

{
  "logLevel": "trace",
  "class": {
    "defaultRenderer": "dagre-d3"
  }
}

{
  "logLevel": "trace"
}

and right now debug messages are not sent from headless browser to console. To do it we need to add something like this:

  page.on('console', async (msg) => {
    const msgArgs = msg.args();
    for (let i = 0; i < msgArgs.length; ++i) {
      console.log(await msgArgs[i].jsonValue());
    }
  });

after this line (for example): https://github.com/mermaid-js/mermaid-cli/blob/master/src/index.js#L187 I don't know if there are issue about it, if it exists I can create PR to fix it.

Examples of generated images: diagram:

classDiagram
note "I love this diagram!\nDo you love it?"
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am I?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
note for Class10 "Cool class\nI said it's very cool class!"

dagre-wraper:

dagre-d3: