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

Support styling of subgraphs #845

Merged
merged 1 commit into from
May 28, 2019
Merged

Support styling of subgraphs #845

merged 1 commit into from
May 28, 2019

Conversation

Qix-
Copy link
Contributor

@Qix- Qix- commented May 24, 2019

Closes #391.

This PR changes the DSL and will break any subgraph definitions that have multiple words in the title without quotes.

For example, the following subgraph will break:

subgraph Foo Bar
...
end
Loading

It adds the following id[Title] syntax, as per #391 (comment):

subgraph
// Anonymous subgraph
end

subgraph "Some Title"
// Anonymous subgraph with title
end

subgraph some-id
// ID'd subgraph
end

subgraph some-id[Some Title]
// ID'd and titled subgraph
end
Loading

Any ID'd subgraph can now be used with the style command:

graph TD
subgraph some-id[Title]
    A --> B
end

style some-id fill:#F77,stroke:#F00,stroke-width:2px
Loading

image

Note that given how subgraph SVG tags are built up, there is no (current) way to style the title text.

@coveralls
Copy link

Pull Request Test Coverage Report for Build 753

  • 38 of 54 (70.37%) changed or added relevant lines in 3 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+0.06%) to 54.316%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/diagrams/flowchart/flowRenderer.js 0 1 0.0%
src/diagrams/flowchart/flowDb.js 12 16 75.0%
src/diagrams/flowchart/parser/flow.js 26 37 70.27%
Totals Coverage Status
Change from base Build 716: 0.06%
Covered Lines: 2062
Relevant Lines: 3770

💛 - Coveralls

@Qix- Qix- mentioned this pull request May 26, 2019
@knsv knsv merged commit 23693bd into mermaid-js:master May 28, 2019
@Qix- Qix- deleted the style-subgraph branch May 29, 2019 15:41
@Qix-
Copy link
Contributor Author

Qix- commented May 29, 2019

Can we get a release for this @knsv? :)

@knsv
Copy link
Collaborator

knsv commented Jun 9, 2019

A release is coming but I am afraid it will take a few weeks. We are aiming for a quicker pulse moving forward by making the release process/test less manual. We are also expanding the core team. If you are interested take a look at the readme file for the areas we need help with if you want to take a more active role.

@stanhu
Copy link
Contributor

stanhu commented Jul 30, 2019

We had a number of users run into this change breaking their diagrams (#895). Is there a way we can preserve backwards compatibility?

tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this pull request Jul 30, 2019
Mermaid v8.2.3 added support for styling in subgraphs, but if there are
multiple words in a title, quotes are required.

```
graph TB

  SubGraph1 --> SubGraph1Flow
  subgraph "SubGraph 1 Flow"
  SubGraph1Flow(SubNode 1)
  SubGraph1Flow -- Choice1 --> DoChoice1
  SubGraph1Flow -- Choice2 --> DoChoice2
  end

  subgraph "Main Graph"
  Node1[Node 1] --> Node2[Node 2]
  Node2 --> SubGraph1[Jump to SubGraph1]
  SubGraph1 --> FinalThing[Final Thing]
end
```

```
graph TB

  SubGraph1 --> SubGraph1Flow
  subgraph SubGraph 1 Flow
  SubGraph1Flow(SubNode 1)
  SubGraph1Flow -- Choice1 --> DoChoice1
  SubGraph1Flow -- Choice2 --> DoChoice2
  end

  subgraph Main Graph
  Node1[Node 1] --> Node2[Node 2]
  Node2 --> SubGraph1[Jump to SubGraph1]
  SubGraph1 --> FinalThing[Final Thing]
end
```

* mermaid-js/mermaid#845
* mermaid-js/mermaid#391 (comment)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/65338
tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this pull request Jul 31, 2019
Mermaid v8.2.3 added support for styling in subgraphs, but if there are
multiple words in a title, quotes are required.

```
graph TB

  SubGraph1 --> SubGraph1Flow
  subgraph "SubGraph 1 Flow"
  SubGraph1Flow(SubNode 1)
  SubGraph1Flow -- Choice1 --> DoChoice1
  SubGraph1Flow -- Choice2 --> DoChoice2
  end

  subgraph "Main Graph"
  Node1[Node 1] --> Node2[Node 2]
  Node2 --> SubGraph1[Jump to SubGraph1]
  SubGraph1 --> FinalThing[Final Thing]
end
```

```
graph TB

  SubGraph1 --> SubGraph1Flow
  subgraph SubGraph 1 Flow
  SubGraph1Flow(SubNode 1)
  SubGraph1Flow -- Choice1 --> DoChoice1
  SubGraph1Flow -- Choice2 --> DoChoice2
  end

  subgraph Main Graph
  Node1[Node 1] --> Node2[Node 2]
  Node2 --> SubGraph1[Jump to SubGraph1]
  SubGraph1 --> FinalThing[Final Thing]
end
```

* mermaid-js/mermaid#845
* mermaid-js/mermaid#391 (comment)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/65338
tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this pull request Jul 31, 2019
Mermaid v8.2.3 added support for styling in subgraphs, but if there are
multiple words in a title, quotes are required.

```
graph TB

  SubGraph1 --> SubGraph1Flow
  subgraph "SubGraph 1 Flow"
  SubGraph1Flow(SubNode 1)
  SubGraph1Flow -- Choice1 --> DoChoice1
  SubGraph1Flow -- Choice2 --> DoChoice2
  end

  subgraph "Main Graph"
  Node1[Node 1] --> Node2[Node 2]
  Node2 --> SubGraph1[Jump to SubGraph1]
  SubGraph1 --> FinalThing[Final Thing]
end
```

```
graph TB

  SubGraph1 --> SubGraph1Flow
  subgraph SubGraph 1 Flow
  SubGraph1Flow(SubNode 1)
  SubGraph1Flow -- Choice1 --> DoChoice1
  SubGraph1Flow -- Choice2 --> DoChoice2
  end

  subgraph Main Graph
  Node1[Node 1] --> Node2[Node 2]
  Node2 --> SubGraph1[Jump to SubGraph1]
  SubGraph1 --> FinalThing[Final Thing]
end
```

* mermaid-js/mermaid#845
* mermaid-js/mermaid#391 (comment)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/65338
tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this pull request Jul 31, 2019
Mermaid v8.2.3 added support for styling in subgraphs, but if there are
multiple words in a title, quotes are required.

* mermaid-js/mermaid#845
* mermaid-js/mermaid#391 (comment)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/65338
tigefa4u pushed a commit to tigefa4u/gitlabhq that referenced this pull request Aug 2, 2019
Mermaid v8.2.3 added support for styling in subgraphs, but if there are
multiple words in a title, quotes are required.

* mermaid-js/mermaid#845
* mermaid-js/mermaid#391 (comment)

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/65338
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Styling subgraph?
4 participants