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.

Sign up for GitHub

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

Add Iconify support #827

Merged
merged 8 commits into from
Jan 20, 2025
+43 −5
Merged

Add Iconify support #827

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77e5a3c
add support for 'logos' and 'mdi' icon packs
ynaka81 Jan 11, 2025
6452129
add architecture-diagram-logos.mmd to test icon packs
ynaka81 Jan 11, 2025
0de4b0f
add src-test as well
ynaka81 Jan 11, 2025
287ed3a
fix lint
ynaka81 Jan 11, 2025
80b4291
make iconPacks a input attribute
ynaka81 Jan 13, 2025
b3a6ab1
add --icon-pack to CLI options
ynaka81 Jan 13, 2025
b3a63c0
Update src/index.js
ynaka81 Jan 13, 2025
043a6e7
update run-tests.sh
ynaka81 Jan 13, 2025
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
8 changes: 8 additions & 0 deletions src-test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -466,5 +466,13 @@ describe("NodeJS API (import ... from '@mermaid-js/mermaid-cli')", () => {
expect(result).toMatchObject({ title: 'Hi', desc: 'World' })
expectBytesAreFormat(result.data, 'svg')
})

test('should show Iconify icon packs', async () => {
const mmdInput = 'architecture-beta\n group aws(logos:aws)[AWS]'
const result = await renderMermaid(browser, mmdInput, 'svg')
expectBytesAreFormat(result.data, 'svg')
const decoder = new TextDecoder()
expect(decoder.decode(result.data)).toContain('<path')
})
})
})
11 changes: 11 additions & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,17 @@ async function renderMermaid (browser, definition, outputFormat, { viewport, bac

await mermaid.registerExternalDiagrams([zenuml])
mermaid.registerLayoutLoaders(elkLayouts)
// lazy load icon packs
const iconPacks = ['logos', 'mdi']
mermaid.registerIconPacks(
iconPacks.map((icon) => ({
name: icon,
loader: () =>
fetch(`https://unpkg.com/@iconify-json/${icon}/icons.json`)
aloisklink marked this conversation as resolved.
Show resolved Hide resolved
.then((res) => res.json())
.catch(() => error(`Failed to fetch icon: ${icon}`))
}))
)
mermaid.initialize({ startOnLoad: false, ...mermaidConfig })
// should throw an error if mmd diagram is invalid
const { svg: svgText } = await mermaid.render(svgId || 'my-svg', definition, container)
Expand Down
11 changes: 11 additions & 0 deletions test-positive/architecture-diagram-logos.mmd
View file
Open in desktop
Copy link
Member

@aloisklink aloisklink Jan 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I love this!

Can you also add a test case that uses this file and the --iconPacks CLI flag in the run-tests.sh file?

Those are the test cases that run on the Docker image we create, and they'll be uploaded to Percy at https://percy.io/Mermaid/web/mermaid-cli

The current test case shows nothing since it isn't running with any icon packs:

image

diff --git a/run-tests.sh b/run-tests.sh
index 1b904c2..8964fee 100755
--- a/run-tests.sh
+++ b/run-tests.sh
@@ -40,6 +40,13 @@ for format in "svg" "png"; do
     -o "$outputFileName"
 done
 
+# Test if passing custom Iconify icons work
+outputFileName="/data/$INPUT_DATA/architecture-diagram-logos-with-icons.png"
+docker run --rm -v $(pwd):/data $IMAGETAG \
+  -i /data/$INPUT_DATA/architecture-diagram-logos.mmd \
+  --iconifyIcons '@iconify-json/logos' \
+  -o "$outputFileName"
+
 # Test if a diagram from STDIN can be understood
 cat $INPUT_DATA/flowchart1.mmd | docker run --rm -i -v $(pwd):/data $IMAGETAG -o /data/$INPUT_DATA/flowchart1-stdin.png -w 800

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks. I updated the file but I can't run it locally. May I ask you to correct me if I'm wrong?

Copy link
Member

Choose a reason for hiding this comment

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

It looks perfect! See https://percy.io/Mermaid/web/mermaid-cli/builds/38169190/changed/2070761674?browser=firefox&browser_ids=64%2C65&group_snapshots_by=similar_diff&subcategories=unreviewed%2Cchanges_requested&viewLayout=side-by-side&viewMode=new&width=447&widths=447

image

Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
architecture-beta
group api(logos:aws-lambda)[API]

service db(logos:aws-aurora)[Database] in api
service disk1(logos:aws-glacier)[Storage] in api
service disk2(logos:aws-s3)[Storage] in api
service server(logos:aws-ec2)[Server] in api

db:L -- R:server
disk1:T -- B:server
disk2:T -- B:db