Comments (6)
I had some idea of being able to paste the svg code and save it as an svg for use in en external program. Maybe you can use the class definiton and the default class for the styling.
from mermaid.
It seems to be allowed within the SVG standard to specify CSS classes inside the SVG. One example:
http://blogs.msdn.com/b/ie/archive/2011/10/27/best-practices-for-getting-started-with-svg.aspx
That way it should still fulfill the "copy&paste" scenario. I will look into if the d3 and dagre-d3 supports inserting a CSS header into the SVG.
from mermaid.
Sounds great! Good luck.
I think the goal should be that one can take the svg code generated by mermaid, save it to a file and be able to open in svg editor of choice.
Good luck!
from mermaid.
Got it working! Have a look at my fork for a working example, I made the test page web_style.html for this purpose. This impact the syntax in the following ways:
style - is still used for inline styling of nodes
class - is used to assign a class to a node (nodes may have multiple classes)
classDef - is unused at the moment. Considering to push the styles from classDefs to the common style section for the SVG, but that is next step.
Once the graph is generated, the script will now check through all stylesheets and copy those that affect anything within the SVG into the SVG style section. The default styling (previously class default) is added at the top of the SVG style section.
What do you think of this approach?
I noticed that for the odd shape and the diamond, inline styles were set on the shape. Those were removed.
Also added a generated SVG file to the test folder, to simplify checking how well it carries the styles. The common styles work fine, but the text doesn't due to foreignObject - and it doesn't like
either. I'll create a separate issue on that.
from mermaid.
This looks really good!
By fetching the styles you will know that the svg will look the same outside the browser context. I think we need to support the classDef statement needs to be included as well. That should be fairly easy as we get those from the parser. This for not breaking backwards compatability but we can deprecate the statement and remove it later.
Looking forward to the pull request.
from mermaid.
Included in release 0.2.16
from mermaid.
Related Issues (20)
- Support for 5-digit Unicode code points HOT 1
- Embedded HTML does not render inside Markdown ("`) strings.
- Timeline Diagram Comment Inconsistencies
- Cannot customize theme through cli and json config file HOT 2
- vite build failure for 10.9.0 HOT 2
- Control brackets around loopText and friends
- gitGraph: support for displaying orphaned branches and unrelated histories HOT 1
- Proposal: Cloud Architecture Diagram HOT 7
- Lots of whitespace around C4 graph.
- Mermaid versions after v9.2.2 cannot be injected into Firefox addons HOT 10
- support for Block diagrams to merge row blocks
- .-> dotted arrows cause syntax error in newest Mermaid release HOT 3
- Allow to define the branch colour in the branch definition (`colour|color:` like `order:` )
- Mermaid v10.9.0 cannot be injected into Chrome browser extensions HOT 1
- Rendering Mermaid Diagram with errors on Webpage HOT 1
- Support plantuml sequence diagram syntax
- Mermaid doesn't have callback for syntax error
- Gantt: Create a hard border between section name and timeline
- erDiagram chinese HOT 1
- Let user see only on the interested terms
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mermaid.