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
68.77k stars 6.08k forks source link

Diagram Factory / Generator / Template for easy adding new diagrams #4606

Open nirname opened 1 year ago

nirname commented 1 year ago

To simplify new diagrams creation process and force developers to create new diagrams in a standard way we need a template that would allow us to generate all required files for the diagram

The structure of generated files should match those in discussion #4499

Perhaps we could turn mermaid-diagram-example into a template

Yokozuna59 commented 1 year ago

I almost have the list of the files need to be created/modified when creating new diagram, but it's need organizing and more details for what to be added/modified.

Originally, I was planning to create it when finalizing the stuff discussed in #4499.

sidharthv96 commented 1 year ago

mermaid-diagram-example might actually be a bad example. We should properly type and refactor it first before using it.

Yokozuna59 commented 1 year ago

mermaid-diagram-example might actually be a bad example. We should properly type and refactor it first before using it.

We should also export some types from packages/mermaid to be able to create other diagrams similar to mermaied-zenuml, currently it's not fully typed.

nirname commented 11 months ago

@Yokozuna59 I added a separate branch for this, in the main repository, so you can commit directly to it, or you may create your own branch, or use my PR as an example

nirname commented 11 months ago

My idea is very basic. We need a feature that allows us to make a scaffold for a diagram, like

pnpm create pie

may be with some arguments, and that would result in a bunch of named files. It does not really matter if it is a new package or a list of files inside the main repository are generated

Yokozuna59 commented 11 months ago

That's also my intention, but I was referring to where we should store those files. Of course, it doesn't make sense to create file in a string variable, we need to store those files some where that the TS language server and prettier could run and throw errors. That's why I suggested using the packages/mermaid-example-diagram as a template.

And when running the command it would add it to packages/mermaid/src/diagrams.

nirname commented 11 months ago

Yep, exactly. It doesn't have to be mermaid-example-diagram either, it can be another package like packages/diagram-template. We could rework mermaid-example-diagram but its name does not reflect its potential purpose, so we probably could rename it or create another package for this task.

Yokozuna59 commented 11 months ago

Maybe renaming could be better, it doesn't has any other use right now.

Yokozuna59 commented 10 months ago

The script should handle two type of diagram templates, external and internal.