Made script to convert directives to yml #4827

Aryangp · 2023-09-10T06:39:31Z

📑 Summary

I have created a script that will convert the existing directive code to yml code as it scan throught the given file and change it to yml code

Resolves #4756

📏 Design Decisions

I have used simple fs library to scan througth the file and using regex pattern to find the directives in it when i find those pattern i make a function that take the json code and convert it into yml and that write that changed code in the existing file

📋 Tasks

Make sure you

📖 have read the contribution guidelines
💻 have added necessary unit/e2e tests.
📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
🔖 targeted develop branch

netlify · 2023-09-10T06:39:35Z

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	`2774ca1`
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/64fd64a4218de7000884e5a3
😎 Deploy Preview	https://deploy-preview-4827--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

codecov · 2023-09-10T06:42:58Z

Codecov Report

Merging #4827 (2774ca1) into develop (00d06c7) will increase coverage by 0.03%.
The diff coverage is n/a.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop    #4827      +/-   ##
===========================================
+ Coverage    79.52%   79.55%   +0.03%     
===========================================
  Files          147      147              
  Lines        13069    13069              
  Branches       613      613              
===========================================
+ Hits         10393    10397       +4     
+ Misses        2546     2542       -4     
  Partials       130      130

Flag	Coverage Δ
e2e	`84.72% <ø> (+0.03%)`	⬆️
unit	`43.27% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

see 3 files with indirect coverage changes

Yokozuna59 · 2023-09-10T19:53:03Z

docs/syntax/script_yml/convertDirectivesToYml.ts

Please move the script to scripts.
And in the next major release we'll move it to .build since it should be a docs build step.

Yokozuna59 · 2023-09-10T19:55:55Z

docs/syntax/script_yml/convertDirectivesToYml.ts

+const filePath : string ="./test/test.md";
+
+fs.readFile(filePath,'utf-8',(err,data)=>{
+    if(err){
+        console.log("Error reading file"+err);
+        return;
+    }


Please wrap file reading in a function that should be executed when needed and filePath as a parameter.

ok i will do this change thanks

Yokozuna59 · 2023-09-10T19:57:50Z

docs/syntax/script_yml/convertDirectivesToYml.ts

+        return;
+    }
+
+    const diresctiveRegix=/%%{init:(.*?)\}%%/g;


The regex should match everything between %%{ and }%%, if it's empty then just remove it.

ok but we have every directive with init in it so that is why i used this regex pattern

Not necessarily, there are some other samples. It also can have empty spaces between after %%{, so do not rely on its content.

This one is escaped \}, but this one is not { (probably, should be).

Yokozuna59 · 2023-09-10T19:59:20Z

docs/syntax/script_yml/convertDirectivesToYml.ts

+       const jsonContent = directiveContent.replace(/'/g, '"');
+
+       // Construct YAML content manually
+       const newYamlContent=`{"config":${jsonContent}}`;


It would be better if used this instead:

config: pie: ...

And some data aren't inside `config. Please refer to docs for that.

can you elaborate this one as i am not able to understand the data part please

As the example I provided in the issue:

title: This is another complicated flow config: theme: base sankey: nodeAlignment: justify flowchart: curve: cardinal htmlLabels: false

Not everything is under the config key

hi @nirname can you help me with a regex patter that i can use to solve this above example and like can you give a directive example where above mentioned example is converted from

hi @Yokozuna59 can you provide me the link where data is not inside config and also the pie that you mentioned will come automatically can you help me out with it

@aloisklink we need your help. There is a schema which represents config, but it seems that the config is only a subset of yaml directives. Where to look, to have a full example?

@Aryangp
There is a schema which represents config. According to the docs we have config and title keys (at least)

Directives is what is being deprecated.

Addressing your question about syntax. These were recently removed from grammar, but you can get the idea
of what directives syntax was and what the current function to detect them is

There is an example of detect function call

This is how diagrams are preprocessed

@aloisklink we need your help. There is a schema which represents config, but it seems that the config is only a subset of yaml directives. Where to look, to have a full example?

So far, I don't think there isn't anything, see #4757. There's only the https://mermaid.js.org/config/configuration.html#frontmatter-config documentation, which isn't very substantial.

Contributions to improving the documentation are welcome (even I don't know what can and can't be put into frontmatter, e.g. does wrap: true do anything??)

Long-term, I'd love to make a JSON Schema that represents and documents the front matter, but I haven't had much time recently to work on mermaid unfortunately (and I first want to help improve the existing MermaidConfig JSON schema).

@Aryangp please keep title and config keys. I'm not sure what else should be here

nirname

Please, fix linting.
If this request only adds script, but does not update directives, then it should not resolve the issue

nirname · 2023-09-11T11:25:59Z

docs/syntax/script_yml/convertDirectivesToYml.ts

+        return;
+    }
+
+    const diresctiveRegix=/%%{init:(.*?)\}%%/g;


Not necessarily, there are some other samples. It also can have empty spaces between after %%{, so do not rely on its content.

This one is escaped \}, but this one is not { (probably, should be).

nirname · 2023-09-11T11:34:53Z

docs/syntax/script_yml/convertDirectivesToYml.ts

+       const jsonContent = directiveContent.replace(/'/g, '"');
+
+       // Construct YAML content manually
+       const newYamlContent=`{"config":${jsonContent}}`;


As the example I provided in the issue:

title: This is another complicated flow config: theme: base sankey: nodeAlignment: justify flowchart: curve: cardinal htmlLabels: false

Not everything is under the config key

sidharthv96 · 2023-09-11T14:48:32Z

Please add the modified contents to this PR.
So we can validate the output and see if we miss anything.

Yokozuna59 · 2023-10-31T19:20:42Z

@Aryangp Is there any updates in this PR?

I'm currently working on the language server and I want to make it convert directives to front matter:

example.webm

Aryangp · 2023-11-03T04:05:51Z

@Yokozuna59 No sorry actually i had my university exams can you give me two days i will update the changes in the PR

made script to convert directives to yml

2774ca1

Yokozuna59 requested changes Sep 10, 2023

View reviewed changes

nirname requested changes Sep 11, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Made script to convert directives to yml #4827

Made script to convert directives to yml #4827

Aryangp commented Sep 10, 2023

netlify bot commented Sep 10, 2023 •

edited

codecov bot commented Sep 10, 2023 •

edited

Yokozuna59 Sep 10, 2023

Aryangp Sep 11, 2023

Yokozuna59 Sep 10, 2023

Aryangp Sep 11, 2023

Yokozuna59 Sep 10, 2023

Aryangp Sep 11, 2023

nirname Sep 11, 2023

Yokozuna59 Sep 10, 2023

Yokozuna59 Sep 10, 2023

Aryangp Sep 11, 2023

nirname Sep 11, 2023

Aryangp Sep 12, 2023 •

edited

Aryangp Sep 13, 2023

nirname Sep 13, 2023

aloisklink Sep 14, 2023

nirname Sep 16, 2023

nirname left a comment

nirname Sep 11, 2023

nirname Sep 11, 2023

sidharthv96 commented Sep 11, 2023

Yokozuna59 commented Oct 31, 2023

Aryangp commented Nov 3, 2023

Made script to convert directives to yml #4827

Are you sure you want to change the base?

Made script to convert directives to yml #4827

Conversation

Aryangp commented Sep 10, 2023

📑 Summary

📏 Design Decisions

📋 Tasks

netlify bot commented Sep 10, 2023 • edited

✅ Deploy Preview for mermaid-js ready!

codecov bot commented Sep 10, 2023 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Aryangp Sep 12, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nirname left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sidharthv96 commented Sep 11, 2023

Yokozuna59 commented Oct 31, 2023

Aryangp commented Nov 3, 2023

netlify bot commented Sep 10, 2023 •

edited

codecov bot commented Sep 10, 2023 •

edited

Aryangp Sep 12, 2023 •

edited