Hi
I saw this on Trilium's forum, it looks like a very nice idea, and it would be awesome to have it at some point in Joplin. I am not a developer so I can't help with that myself.
https://github.com/zadam/trilium/discussions/1588
I guess you can do something similar using Gantt diagrams on mermaid.
I use simpler timelines using plain multimarkdown as described in the link.
You can add this on top of your note,
<style>
dl:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 50%;
z-index: 400;
/* max-height: max-content; */
}
dl > dt:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
/* border: 3px solid; */
/* #5e0900 or #22c0e8 for circle border*/
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
dl > dt, dl > dd {
margin: 6pt 0; /* was 20px */
padding-left: 60px;
}
</style>
Markdown would use definition lists and look like this and rendered version below.
# example
1066
: September. Harald Hardrada, King of Norway, invades England
: October. William of Normandy defeats and kills Harold II at Hastings.
: ---
1070
: William the Conqueror subdues the north of England
: First Norman stone castle is built in Wales.
: ---
2021
: I made this timeline.
Note: It it important to enable the deflist syntax in Joplin configuration for this to work.
8 Likes
Wow. Interesting. Would that be possible to do a timeline that have categories or tag for event in multimarkdown? Timeline com be horizontal with multimarkdown?
I'm also looking for a possibility to work with timeline in joplin as I work with History of science. A nice way would be to be able to have events in single notes and to create a timeline of events. The timeline could be linked with a dedicated tag (example timeline1). It would need to define a format for notes that stores events. There is much work to be done with timeline. I never found a way to make timeline in a sufficiently simple way and with powerfull options (like categorizing and maybe the possibility to have multiple tag/category).
2 Likes
Very nice! So nice that I'm trying to think of work-related info that I can present in this format.
Thank you!
2 Likes
I'm not sure about horizontal timelines. However, for making a timeline with events in single individual notes you could use the above multimarkdown list solution with quick links plugin. Check it out.
1 Like
Yes!
Ok, thank you. I don't how quick-links plugins may help for this but I found that I could tag notes in order to easa their selection and then use joplin-plugin-combine-notes to create a single note for this kind of thing. Though, I do need a bit more options for timeline. I'm still thinking of what I need. I have to think of some theoretical aspects about history representations and timeline but it seems there is very few thing on that subject. What I need would mostly be solved by GANTT diagram. I would probably need a bit more than horizontal categories, something like a grouping of events under a name (example: scientific revolution with many events).
Hope you figure out a good workflow for your use case. 
1 Like
I tried gantt with mermaid but it does not work in joplin. I may try to use an external python and a special format in notes that I could use to create a GANTT diagram as I did not found any satisfactory solutions.
It's surprising. I have a few mermaid gantt diagrams in Joplin. It is working, but it's not perfect. But I like it. Still, it's not the ideal "timeline" feature I would like to have.
Ok. Interesting information. Ii made me seek and found another gantt diagram that was present in my notes that work properly:
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
Here is the example of gantt diagram that does not work and me make my previous report:
mermaid
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
functionality added :milestone
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
I just copied them from examples found online. In the last case, I get a syntax error. I use joplin 2.4.12 on archlinux. I may use only the simpler sintax of the first example. I mistakenly supposed that joplin was not supporting Gantt Mermaid syntax. I had forgotten the other example that works fine.
In fact, I'm also not fully satisfied with gantt mermaid for timeline. I'd also like to be able to use a way to group events in a timeline but I would also like to have aspects of events and relations between aspects of events... I'm still seeking a timeline app that may accommodate my initial ideas. I still do some research of what kind of representation I would like to find in a timeline app. It seems to me that people working in History or History of Science like me did not work seriously about graphical representations of Historical datas. It seems so strange to me! I did not yet found what I would like.
I just tried your gantt chart at Mermaid Live Editor and it does not work either.
Joplin uses the Mermaid project as a module. If something is not working or you want more features, you would have to open an issue with that project. If it's a bug, they'll fix it (hopefully) and we can upgrade to the new version.
1 Like
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.