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

Adding new diagram type - Block Diagram #5221

Merged
merged 76 commits into from Feb 1, 2024
Merged

Conversation

knsv
Copy link
Collaborator

@knsv knsv commented Jan 22, 2024

πŸ“‘ Summary

This PR introduces comprehensive support for Block Diagrams in Mermaid, offering users a versatile and intuitive way to represent complex systems, processes, or architectures visually. The new feature enhances the existing Mermaid suite by allowing for full control over the positioning of shapes, making it ideal for creating clear and concise block diagrams.

Resolves #3358

Example

image

Code:

```mermaid
block-beta
    columns 3
    %% whitespace has been added to make the code easier to read
    space             a(("πŸš€"))               space
                       space:3
                      c("🌝"):3
    d1<[" "]>(down) d2<[" "]>(down) d3<[" "]>(down)

    block:e1:3
        sube1(("πŸ‘½")) sube2(("πŸ‘Ύ"))   sube3(("πŸ›Έ"))
    end

    d4<[" "]>(down)                         space:2
    g("🀯")         r1<[" "]>(right)      f(("πŸ‘―β€β™‚οΈ"))

    a --> c
```

πŸ“ Design Decisions

The implementation of Block Diagrams in Mermaid focuses on user flexibility and ease of use. Key features include:

  • Customizable Block Positioning: Unlike the automatic layout in flowcharts, block diagrams allow users to precisely control the placement of shapes, ensuring diagrams meet specific layout requirements.
  • Variety of Shapes and Styles: A range of block shapes, from standard rectangles to specialized forms like cylinders and parallelograms, enables diverse representations of different elements. Additionally, extensive styling options for individual blocks allow for visually distinctive diagrams.
  • Advanced Linking Capabilities: Various arrow types and the ability to include text on links provide nuanced ways to represent relationships and flows between components.
  • Dynamic Column Widths: Blocks automatically adjust their sizes based on content, ensuring a balanced and readable layout.

πŸ“‹ Tasks

Make sure you

knsv and others added 21 commits January 30, 2024 13:21
Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>
* develop:
  Update container
  Update container
  Remove pnpm cache
  Use `.node-version` file in workflows
  Remove node version from matrix
  Update to Node v20
  Update to Node v20
Copy link
Member

@aloisklink aloisklink left a comment

Choose a reason for hiding this comment

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

Just delete the packages/mermaid/src/docs/syntax/block-old.md file (see #5221 (comment)), then this looks good to me to merge :)

Thanks for going through all those comments, I imagine it must have been a pain to fix everything. πŸš€

@ashishjain0512 ashishjain0512 added this pull request to the merge queue Feb 1, 2024
Merged via the queue into develop with commit b38def6 Feb 1, 2024
30 checks passed
@ashishjain0512 ashishjain0512 deleted the 3358-blocks-diagram branch February 1, 2024 11:37
fuxingloh pushed a commit to fuxingloh/contented that referenced this pull request Feb 3, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.7.0` ->
`10.8.0`](https://renovatebot.com/diffs/npm/mermaid/10.7.0/10.8.0) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/mermaid/10.8.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/mermaid/10.8.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/mermaid/10.7.0/10.8.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/mermaid/10.7.0/10.8.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>mermaid-js/mermaid (mermaid)</summary>

###
[`v10.8.0`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.8.0)

[Compare
Source](https://togithub.com/mermaid-js/mermaid/compare/v10.7.0...v10.8.0)

### v10.8.0

#### Features

<img width="375" alt="image"
src="https://github.com/mermaid-js/mermaid/assets/5837277/c17405fb-2a06-4f7c-9c77-5eaba6c76747">

- Adding new diagram type - Block Diagram by
[@&#8203;knsv](https://togithub.com/knsv) in
[mermaid-js/mermaid#5221

- Feature/5114 add parallel commit config by
[@&#8203;mathbraga](https://togithub.com/mathbraga) in
[mermaid-js/mermaid#5161

- Changes to Gantt Parsers to allow hashes and semicolons to titles,
sections, and task data. by
[@&#8203;FutzMonitor](https://togithub.com/FutzMonitor) in
[mermaid-js/mermaid#5095

- Feature/4653 add actor-top class to sequence diagram by
[@&#8203;Ronid1](https://togithub.com/Ronid1) in
[mermaid-js/mermaid#5241

#### Documentation

- Updated gantt chart docs to show all config options by
[@&#8203;murdoa](https://togithub.com/murdoa) in
[mermaid-js/mermaid#5192
- Contribution documentation improvements by
[@&#8203;nirname](https://togithub.com/nirname) in
[mermaid-js/mermaid#5132
- Update flowchart.md - how to use font-awesome
[#&#8203;5195](https://togithub.com/mermaid-js/mermaid/issues/5195) by
[@&#8203;arukiidou](https://togithub.com/arukiidou) in
[mermaid-js/mermaid#5196
- Add more detailed docs for Gantt tasks by
[@&#8203;sorenisanerd](https://togithub.com/sorenisanerd) in
[mermaid-js/mermaid#5194
- Docs/4974 reorder integration links by
[@&#8203;Ronid1](https://togithub.com/Ronid1) in
[mermaid-js/mermaid#5066
- docs: fix swimm link by
[@&#8203;Yokozuna59](https://togithub.com/Yokozuna59) in
[mermaid-js/mermaid#5219
- Update Slack community links to Discord by
[@&#8203;Olegt0rr](https://togithub.com/Olegt0rr) in
[mermaid-js/mermaid#5225
- Docs: Mermaid chart updates by
[@&#8203;huynhicode](https://togithub.com/huynhicode) in
[mermaid-js/mermaid#5232
- Fix typos in timeline syntax samples by
[@&#8203;sblom](https://togithub.com/sblom) in
[mermaid-js/mermaid#5139

#### Bug fixes

- Bug/5059 fix external connection after updating edges by
[@&#8203;mathbraga](https://togithub.com/mathbraga) in
[mermaid-js/mermaid#5127
- \[Fix] Sequence diagram actor menu popup by
[@&#8203;vitorsss](https://togithub.com/vitorsss) in
[mermaid-js/mermaid#5160
- fix: Dompurify Hooks by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5236
- Accurate pie chart labeling for text alignment by
[@&#8203;JenningsWilliam](https://togithub.com/JenningsWilliam) in
[mermaid-js/mermaid#5141
- fix: Redirect of old URLs by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5250
- Fixed Typo in ErrorRenderer.ts by
[@&#8203;FutzMonitor](https://togithub.com/FutzMonitor) in
[mermaid-js/mermaid#5256

#### Chores

- Revert "Revert 5041 feature/4935 subgraph title margin config option"
by [@&#8203;mathbraga](https://togithub.com/mathbraga) in
[mermaid-js/mermaid#5205
- build(deps-dev): bump follow-redirects from 1.15.2 to 1.15.5 by
[@&#8203;dependabot](https://togithub.com/dependabot) in
[mermaid-js/mermaid#5200
- chore(deps): update all patch dependencies (patch) by
[@&#8203;renovate](https://togithub.com/renovate) in
[mermaid-js/mermaid#5150
- E2E Image comparison by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5208
- E2E test by [@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5210
- Optimise caching of test results by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5213
- Update update-browserlist.yml to fix deprecation and action fails by
[@&#8203;Abrifq](https://togithub.com/Abrifq) in
[mermaid-js/mermaid#5151
- UpdateCypress by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5228
- Use node v20 by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5248
- Convert Mindmap to TS by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5247
- chore: Add interface naming Convention by
[@&#8203;sidharthv96](https://togithub.com/sidharthv96) in
[mermaid-js/mermaid#5254

#### New Contributors

- [@&#8203;murdoa](https://togithub.com/murdoa) made their first
contribution in
[mermaid-js/mermaid#5192
- [@&#8203;arukiidou](https://togithub.com/arukiidou) made their first
contribution in
[mermaid-js/mermaid#5196
- [@&#8203;sorenisanerd](https://togithub.com/sorenisanerd) made their
first contribution in
[mermaid-js/mermaid#5194
- [@&#8203;Ronid1](https://togithub.com/Ronid1) made their first
contribution in
[mermaid-js/mermaid#5066
- [@&#8203;Olegt0rr](https://togithub.com/Olegt0rr) made their first
contribution in
[mermaid-js/mermaid#5225
- [@&#8203;vitorsss](https://togithub.com/vitorsss) made their first
contribution in
[mermaid-js/mermaid#5160
- [@&#8203;sblom](https://togithub.com/sblom) made their first
contribution in
[mermaid-js/mermaid#5139
- [@&#8203;JenningsWilliam](https://togithub.com/JenningsWilliam) made
their first contribution in
[mermaid-js/mermaid#5141

**Full Changelog**:
mermaid-js/mermaid@v10.7.0...v10.8.0

</details>

---

### Configuration

πŸ“… **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

β™» **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

πŸ”• **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/levaintech/contented).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNTMuMiIsInVwZGF0ZWRJblZlciI6IjM3LjE1My4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Layered Blocks Layout
5 participants