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

Apply styling from css when using the CLI utility #85

Closed
knsv opened this issue Jan 5, 2015 · 5 comments · Fixed by #116
Closed

Apply styling from css when using the CLI utility #85

knsv opened this issue Jan 5, 2015 · 5 comments · Fixed by #116
Labels
Type: Enhancement New feature or request

Comments

@knsv
Copy link
Collaborator

knsv commented Jan 5, 2015

It is possible to apply styles to diagrams via css classes.

It would be cool if styling could be applied this way also when using the client utility.

This could perhaps be achieved via an option for giving a path to a css file which is then included in the rendering of the diagram.

@fardog, what do you think of this idea?

@knsv knsv added the Type: Enhancement New feature or request label Jan 5, 2015
@fardog
Copy link
Contributor

fardog commented Jan 5, 2015

Injecting CSS into the page is fairly trivial; I'm assuming this is the only requirement? I'd probably add the following option:

  -c --includeCSS    Specify a path to a CSS file to be included when rendering each diagram

…then, that CSS file would be included in each file that you specified to be rendered. However, I'd also add the following caveats:

  • The CSS won't affect SVG output, and a warning would be printed to that effect when trying to render SVG (of course, SVG is still experimental until Generated SVG works poorly outside web browsers #58 is closed out)
  • Any styling that plays with the margins could be problematic; basically it'll be somewhat easy to shoot yourself in the foot.

As to the margins; Phantom doesn't have a "take a screenshot of this region" function, so the way I accomplish this is by removing all margins, inspecting the width/height of the SVG element after it's rendered, and then set Phantom's viewport to that size. If someone were to mess with anything that moved it around on the page, this code would fail, and the image would be offset.

If these seem like reasonable caveats, I'll implement as above. I should have time to take a look at it this week.

@zdrummond
Copy link

That would be great!

@naseer
Copy link

naseer commented Jan 16, 2015

+1 - I wanted to use this on the command line primarily - I had to scaffold a webapp to get around it for now :)

@knsv
Copy link
Collaborator Author

knsv commented Jan 31, 2015

@fardog, is this issue still active?

@fardog
Copy link
Contributor

fardog commented Feb 3, 2015

sorry for the delay on this! just submitted #116 which should resolve this issue.

@knsv knsv closed this as completed in #116 Feb 3, 2015
mgenereu referenced this issue in mgenereu/mermaid Jun 25, 2022
mgenereu referenced this issue in mgenereu/mermaid Jun 25, 2022
* fixEditInit:
  Fix Editor Init. Fixes #85
mgenereu referenced this issue in mgenereu/mermaid Jun 25, 2022
…ditor into develop

* 'master' of https://github.com/mermaid-js/mermaid-live-editor: (56 commits)
  Release
  Fix Config Update
  Fix Editor Init. Fixes #85
  Release
  Add deployment
  Fix header image
  Fix font path
  Update Monaco Editor
  Add stale-bot
  Redeploy Live Editor
  Release Live Editor
  Fix Init error #77
  Fix LiveEditor
  Add prettierignore
  Release Live Editor
  Release Live Editor
  Update beta-release
  Create codeql-analysis.yml
  Change formatting
  Add 2021
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants