Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made script to convert directives to yml #4827

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions docs/syntax/script_yml/convertDirectivesToYml.ts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok sure

Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as fs from 'fs';


const filePath : string ="./test/test.md";

fs.readFile(filePath,'utf-8',(err,data)=>{
if(err){
console.log("Error reading file"+err);
return;
}
Comment on lines +4 to +10
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok i will do this change thanks


const diresctiveRegix=/%%{init:(.*?)\}%%/g;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

const modifiedData= data.replace(diresctiveRegix,(_,directiveContent)=>{
// Replace single quotes with double quotes and remove outer curly braces
const jsonContent = directiveContent.replace(/'/g, '"');

// Construct YAML content manually
const newYamlContent=`{"config":${jsonContent}}`;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better if used this instead:

config:
  pie: ...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

@Aryangp Aryangp Sep 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

console.log(newYamlContent);
const yamlContent = jsonToYaml(newYamlContent);
return `---\n${yamlContent}\n---\n`;
});

fs.writeFile(filePath,modifiedData,'utf-8',(err)=>{
if(err){
console.log("Error writing file"+err);
return;
}
console.log("File written successfully");
})
})


// Convert JSON to YAML manually
function jsonToYaml(jsonContent: string): string {
const jsonObj = JSON.parse(jsonContent);

// Helper function to convert an object to YAML
const objectToYaml = (obj: Record<string, any>, indent: number = 0): string => {
const lines:string[] = [];
const spacing = ' '.repeat(indent * 2);

for (const [key, value] of Object.entries(obj)) {
if (typeof value === 'object') {
// Recursively convert nested objects to YAML
const nestedYaml = objectToYaml(value, indent + 1);
lines.push(`${key}:\n${nestedYaml}`);
} else {
lines.push(`${key}: ${value}`);
}
}

return lines.map(line => spacing + line).join('\n');
};

const yamlContent = objectToYaml(jsonObj);

return yamlContent;
}