mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.54k stars 6.48k forks source link

Support tagging and hiding #1368

Open digulla opened 4 years ago

digulla commented 4 years ago

For printing and generally for a better overview, it would be great to be able to filter the resulting diagrams. For example in classes, just show the class names and omit the fields. For Gantt charts, just show important tasks and hide the "noise" or allow to assign tasks to developers.

I would like to suggest to implement this feature with hashtags. The rendered graph should offer a popup or simply a line of all tags plus a "show all" button.

Example class diagram:

classDiagram

class Customer
Customer : +Long id #persistence
Customer : +String name #cid

class BankAccount
BankAccount : +Long id #persistence
BankAccount : +Long customerId #persistence #fk
BankAccount : +BigDecimal balance #monetary
BankAccount : +deposit(amount) #monetary
BankAccount : +withdrawal(amount) #monetary

class Foo

BankAccount --> Customer

There are four tags in this example: persistence, cid, fk and monetary.

By clicking on a tag, only elements with this tag (and their parents) are still visible. Clicking on a tag should toggle it for easy multi-selection ("show all" deselects all tags).

Clicking on cid would just display Customer and the field name. Foo and BankAccount would be hidden.

Clicking on persistence would display two classes and the three fields related to database operations.

matthunt1984 commented 4 years ago

I came across looking for a similar feature to the PlantUML 'hide' feature. I currently have a class diagram lets say '3 layers' deep' and I want to hide the layer-3 nodes. e.g. hide MyL3Class

More details referenced here under heading "Hide attributes, methods" https://plantuml.com/class-diagram

jgreywolf commented 1 year ago

This is currently possible using css styles/classes - will have to look into adding this into the backlog for enhancing the current design for the diagram though