Can we support vertial timeline diagram

[ForrestFeng]

Can we support the verital timeline in mermaid.

I need to draw a timeline to show users how ting changed in a timely manner, some thing like below.

It does not have to do it exactly the same way.

About implementation, we may not need to recreate the wheels(syntax for the timeline). Mermaid already supports gantt diagram with different sections. Can we render it in the Top-Down or Bottom-Up layout just like what we have in the flow graph?

Gantt is good, but it would be a mess if we have put many information into a wide time range. A vertical timeline has no such issue. And it would be better if we can show two or more timelines for different objects.

Just a thought, it may help us turn the gantt diagrams into a timeline easily.

[WTIGER001]

Yes Please!

[lschierer]

I would like to see this as well, ideally with support for multiple verticals, ie some events are one sequence and other events are a second sequence.

[aress31]

I would love to see this feature too!

[NKjoep]

it could be useful with different activities: from product release, to team retrospectives. I'd make great use of it, if available.

[johndzxu]

Definitely! Upvote +1

[nirname]

To my mind, we need to implement YAML configuration first and then it could be very convenient to implement without intrusion in internals

[YelvGH]

Upvote +1

[nirname]

@mastersibin Hi! This is a similar feature to what you have already implemented in git graph. I thought you might be interested in contributing to it

[mastersibin]

Yes, I'll look at the code.

[mastersibin]

@nirname these are mocks for timeline vertical. Mock 1 Mock2

Are we planning something like this?

[rui-nar]

I'd love it if the spacing could be proportional to the time difference between events :)

On Mon, Aug 14, 2023, 07:37 Sibin Thomas @.***> wrote:

@nirname https://github.com/nirname this is a mock for timeline vertical. [image: timeline drawio] https://user-images.githubusercontent.com/120415957/260365926-148df1e5-b595-4343-b447-20df9e0c1f5f.png

Are we planning something like this?

— Reply to this email directly, view it on GitHub https://github.com/mermaid-js/mermaid/issues/2268#issuecomment-1676709887, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACP6EXYYHXSLCBOZHB3RYVTXVG2RLANCNFSM5C2TMXCA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[nirname]

@mastersibin Looks great! I think the main request is to turn the whole diagram 90 degrees but keep labels as they are. Feel free to open PR when you are ready, write resolve #issue-number in its comment, and it will be attached here. We can discuss all edge-cases inside.

[mastersibin]

@nirname I just want to understand the orientation when the diagram is 90 degrees.

Original Timeline Diagram

Rotated

I just want to know, in the rotated png, do I have to just tilt the text and thats it?

[nirname]

@mastersibin Graph should go from top to bottom, generally. But we need to elaborate on how those groups like "go to work" should look like

[mastersibin]

@nirname I guess we should just rotate all the boxes by 90 degrees. Right now we should work on that. On the way we can fix problems.

[sdmcclain]

I don't mean to distract from the core of this issue, but I wonder whether supporting a vertical layout for Gantt charts would be considered part of this effort? Or perhaps there is a separate issue somewhere for this request?

[nirname]

@sdmcclain Please, check opened Gantt issues or trying to search untagged, and if there is no issue feel free to open a new one

[HananoshikaYomaru]

I think this will be so much useful

[efsalvarenga]

Strongly support it as well.

[neil3d]

Rreally need this feature. Upvote +1

[rongshubian]

@nirname I guess we should just rotate all the boxes by 90 degrees. Right now we should work on that. On the way we can fix problems.

Is there any process ？this will be so much useful。

[juneleung]

A good idea! It would be powerful!