need to develop roadmap functionality within our website and docs site similar to the website roadmap.sh and markmap.js.org

[devopstoday11]

This task is for later, not now.
@tfsojon

Here is the reference for the roadmap.sh site's code base - https://github.com/kamranahmedse/developer-roadmap , and
the markmap reference - https://markmap.js.org/ , https://github.com/markmap/markmap
The above two are for reference only to take a look. Strictly do not use them in our site code since licensing issues will occur.

This task can be achieved by using Javascript, Typescript, CSS, HTML, and adding the functionality in our Hugo theme.
Do this after returning from vacation the following week, please (1st week of May).

Purpose of this is to be able to write mindmaps in markdown using markdown syntax and have those rendered into beautiful mindmaps on our website. This attracts more visitors, especially tech people.

We can discuss how to combine the above two reference ideas and make them into one for our site.

[tfsojon]

@devopstoday11 please create a video in details about this task.

[devopstoday11]

@tfsojon
explained requirements here -
https://www.loom.com/share/b1ca6faa2a914efc8156be987abad17f?sid=db3b673c-c801-41a1-a6bf-4eb21b628fe2

[tfsojon]

@devopstoday11 you there?

[devopstoday11]

@tfsojon
Hi, what's up?

[tfsojon]

please check discord.

[tfsojon]

@devopstoday11
Roadmap added. Check and left me know.

[tfsojon]

@devopstoday11
Check the code form here - https://github.com/tfsojon/intelops-website/tree/chandu
pull request not created because of the current PR not marged.

[devopstoday11]

@tfsojon , just saw this message.
roadmap feature changes are already available in the PR since you committed to same branch. I will merge and test in my local and let you know.

[devopstoday11]

@tfsojon ,
so far the roadmaps feature looks fine. I changed the name from roadmaps to mindmaps / mindmap , except I couldn't figure how to change in the URL too. When I changed in the URL as well, the page is not loading correctly. Please check.
I merged my updates in my chandu branch. You can take the updated branch and then fix the URL name change issue - "roadmaps to mindmaps , and test it".

[devopstoday11]

@tfsojon , BTW, what all the types of mermaidjs diagrams can I use to make the diagrams interactive (clickable) ? @tfsojon

[devopstoday11]

@tfsojon , so far the roadmaps feature looks fine. I changed the name from roadmaps to mindmaps / mindmap , except I couldn't figure how to change in the URL too. When I changed in the URL as well, the page is not loading correctly. Please check. I merged my updates in my chandu branch. You can take the updated branch and then fix the URL name change issue - "roadmaps to mindmaps , and test it".

I figured the issue and fixed it and pushed it to chandu branch. @tfsojon

[tfsojon]

@tfsojon , BTW, what all the types of mermaidjs diagrams can I use to make the diagrams interactive (clickable) ? @tfsojon

Currently supports mindmap diagram only.

Since they doesn't have the click support, I have to write custom code separately for different diagram.
Let me know which possible diagram's you want to use. @devopstoday11
I think If you need to use all of them in your mindmap, then we should invest time on it. otherwise doesn't need to.
what do you think?

[tfsojon]

@devopstoday11 please check the last comment.

[devopstoday11]

@tfsojon , BTW, what all the types of mermaidjs diagrams can I use to make the diagrams interactive (clickable) ? @tfsojon

Currently supports mindmap diagram only.

Since they doesn't have the click support, I have to write custom code separately for different diagram. Let me know which possible diagram's you want to use. @devopstoday11 I think If you need to use all of them in your mindmap, then we should invest time on it. otherwise doesn't need to. what do you think?

Yes, we would need these diagram types support as well to make them clickable, @tfsojon :-
Flowchart
C4 Diagram
ZenUML
Graph
Note:- Same diagram types to be clickable are enough for Docs site as well.

Also, I want to be able to use custom colors for the nodes/shapes (alias Objects) and edges (relationship lines) in the diagrams. How to do that? Is it something part of those diagrams syntax OR , does our website need to have that feature available explicitly? My guess is colors and shapes are part of syntax. Am I right?

And, how can I add any type of mermaid diagram which is interactive (clickable) in a blog in the blogs area and an article in the learning-center? @tfsojon

[tfsojon]

• Colors are comes from mermaidjs.
  no option for change this on specific way.
  we can change the theme btw.

• need to add the script on the blog and learning-center. will add.

[devopstoday11]

• Colors are comes from mermaidjs.
  no option for change this on specific way.
  we can change the theme btw.
• need to add the script on the blog and learning-center. will add.

@tfsojon
How to change the theme? If I change the theme, does it impact only the mermaidjs diagram or the entire page on the site?

[tfsojon]

only impact on diagram

[tfsojon]

@devopstoday11 check the PR #223
the click option is working on the Mindmap, Flowchart and C4Context.
check - http://localhost:1313/mindmaps/devops/ page on local

but I need few possible examples to test the process are working or not in every way.
@devopstoday11 could you please add some example diagram on the devops page?

[devopstoday11]

@devopstoday11 check the PR #223 the click option is working on the Mindmap, Flowchart and C4Context. check - http://localhost:1313/mindmaps/devops/ page on local

but I need few possible examples to test the process are working or not in every way. @devopstoday11 could you please add some example diagram on the devops page?

@tfsojon , I checked the changes. The clickable option looks good. But I didn't see any sample clickable option you added for ZenUML example. Mindmap, Flowchart, and C4 Diagram clickable are fine ; by following your examples we can write our mindmaps in those 3. Please show some examples on how to do the same for ZenUML & Graph as well.
Note:- I think Graph and Flowchart diagrams are not just Flowchart. Please check and confirm that.

Any update on adding the mindmap clickable feature script to learning-center & blogs?

[tfsojon]

@devopstoday11 There are no Graph. are you talking about gitGraph?

[tfsojon]

@devopstoday11
added click option for mermaid-zenuml
added marmaid.js in learning-center and blog

[devopstoday11]

@tfsojon ,
I am unsure how to test mermaidjs clickable feature in learning-center and blogs. Can you show me 1 example in each area how to use the feature in those 2 areas please.

And, I do see that the example you have in the mindmaps in devops for ZenUML diagram. When I click on the elements nothing is opening like you showed for Flowchart, Mindmap, C4 diagrams. How to get a document opening similarly for zenUML diagram also when I click on some item in the zenUML diagram? @tfsojon

[tfsojon]

Hello @devopstoday11 ,
Just add it like the way I added in content/english/mindmaps/devops/_index.md page

Make sure the page-title and the code-block-text is same.

[tfsojon]

If this is ready to go, then I will add this into doc site too.
let me know if it's need any improvement or not @devopstoday11

[devopstoday11]

@tfsojon I am still testing on the website.
But, yes please proceed to add this feature to docs site. Usage of mermaid diagrams to make the diagrams interactive on docs site is easy compared to the main website. Hence, the main website needs more testing.

[devopstoday11]

@tfsojon @tfsumon

Just like how mermaidjs functionality support was added into both website and docs site, we want python diagraming library support as well.

This is the library I mentioned -
https://github.com/mingrammer/diagrams

[devopstoday11]

Also need to develop feature similar to gitpitch within our website and docs site, for hosting slides within our sites. The slides are similar to slides.com which uses markdown & the above mentioned python diagram library.

https://github.com/gitpitch/gitpitch

@tfsojon @tfsumon
gitpitch was old project. This might need to be used as reference and develop similar feature in our sites instead of using it directly since that project is not active and have many security vulnerabilities.

Also, want similar functionality like pintora -

https://github.com/hikerpig/pintora
Pintora project is also old, so it will only help as reference instead of using directly. @tfsojon you might have already followed what pintora project was doing, when you added mermaid support to our sites. So before jumping in, please compare.

[tfsumon]

Alright! I'll keep you updated.

[devopstoday11]

@tfsojon @tfsumon

Just like how mermaidjs functionality support was added into both website and docs site, we want python diagraming library support as well.

This is the library I mentioned -
https://github.com/mingrammer/diagrams

After mingrammer diagrams support is added, need to work on the below diagram libs support as well -

geoJSON and topoJSON, and ASCII STL

@tfsojon @tfsumon

[devopstoday11]

@tfsumon , any updates?

[tfsumon]

Hello @devopstoday11,

Hugo offers built-in support for Goat ASCII diagrams and any diagrams that can be created using Mermaid JS. However, it does not provide support for Mingrammer, geoJSON, topoJSON, or ASCII STL. Consequently, this means it's not currently feasible to incorporate these libraries into our websites.

I have been actively researching ways to integrate these libraries or similar functionalities into our website for quite a few days now. Unfortunately, I have yet to discover a suitable approach, but my research is ongoing.

Rest assured, I will keep you updated as soon as I find a viable method to incorporate them into our websites.

https://gohugo.io/content-management/diagrams/

[devopstoday11]

Hello @devopstoday11,

Hugo offers built-in support for Goat ASCII diagrams and any diagrams that can be created using Mermaid JS. However, it does not provide support for Mingrammer, geoJSON, topoJSON, or ASCII STL. Consequently, this means it's not currently feasible to incorporate these libraries into our websites.

I have been actively researching ways to integrate these libraries or similar functionalities into our website for quite a few days now. Unfortunately, I have yet to discover a suitable approach, but my research is ongoing.

Rest assured, I will keep you updated as soon as I find a viable method to incorporate them into our websites.

https://gohugo.io/content-management/diagrams/

@tfsumon ,
Got it. No problem. Don't spend too much time on those libraries. You can look into mingrammer later. There is an approach. We can discuss it when we have free time to work on it.
For now,
Please look into how to build same features as in this gitpitch project (without using this project) -> https://github.com/gitpitch/gitpitch